Comments (6)
No, I don't think that the spinner should start immediately after initialization, because it can be initialized, but is not visible to the user. It would make more sense to start the spinner when you need it.
The initialization can take place for example when loading the page and the spinner should only be started when the user has performed an action.
And yes, there is no stop function. But you can solve this by simply hiding the spinner via CSS or use JavaScript to remove it from the DOM
To start the loop you can simply call the loop method.
// on page load
const spinners = Spinner. upgradeAllElements();
// after an action
spinners.forEach(spinner => {
spinner.loop();
});
from audi-ui.
Hey there, thanks for the response!
And yes, there is no stop function. But you can solve this by simply hiding the spinner via CSS or use JavaScript to remove it from the DOM
✔️ That's expected and perfectly fine.
the spinner should start immediately after initialization, because it can be initialized, but is not visible to the user.
True, but specifically for a continuous spinner, it makes no difference if it is already looping invisibly. The user can easily control visibility of the spinner with his own known methods as mentioned above. The main point though is API UX and making the usage of the component easier.
The concrete case that lead to the issue was:
- a fully functional VUE App with
upgradeAllElements()
in place - we had to just add a spinner when waiting for an async API response
- we added the spinner component HTML snippet, added visibility via CSS class and VUE toggle flag at the correct places
- the spinner was not rendered, though all other components worked, which was unexepected
- quite a bit of debugging time (in relation to time spent adding the spinner) was spent until we found we need to manually call
Spinner.upgradeAllElements()
- then the spinner was displayed, but it did not spin - again this was unexpected
- another round of debugging/search through the ui kit code until we found, we need to manually trigger the
loop()
method on every spinner initialized
You see, there were two pain points that seem unnecessary in the specific case of continuous spinners. Would be cool if that could be remedied by either changing the behaviour or at least documenting the expected usage of the spinner component better. Thanks for your time!
from audi-ui.
Well, that spinner covers several cases. It also shows a load spinner for upload or a continuous spinner.
But the documentary is still expandable. But I think Audi and Strichpunkt Design are going to continue using it.
When using Audi UI components I would be careful because of the missing license.
But if you have an excerpt of the code snippet I might be able to help you with how to install it. (Of course with the background that you start the Continuous Spinner with loop()
. You can find the upgradeAll()
-function here)
from audi-ui.
When using Audi UI components I would be careful because of the missing license.
Working on an Audi project as external contractor, so not an issue.
But if you have an excerpt of the code snippet I might be able to help you with how to install it.
Thanks for the offer. We got it all working, I just wanted to share the suboptimal experience to maybe improve the developer experience a bit.
from audi-ui.
Okay, can you close the issue?
from audi-ui.
I still think there is someting to improve in the spinner component, so I leave it up to you to close the issue and/or create a new issue that is more actionable for you.
from audi-ui.
Related Issues (20)
- Not working for ReactJS with TS HOT 4
- Importing with Angular 2 HOT 6
- License HOT 5
- ReactJS Support
- Update slider value HOT 1
- Update node engine HOT 2
- Cannot import module HOT 1
- Example for Sidebar navigation
- No User Agent Style overwrite
- Modals and Nav do not work with Angular HOT 1
- Use with React (create-react-app) HOT 4
- Checked method returning incorrect value
- Update Font to AudiTypeWide
- Parcel build failed at @-moz-viewport
- Let's get rid of the IE ?
- Webpack Encore ?
- Upgrade node to 7.x
- Dropdown not closing when value selected (single values scenario) HOT 2
- Calling a function HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from audi-ui.