I've been working on improving the user experience in my projects and I'm curious about the possibility of using custom loading indicators or spinners in Retool. Has anyone successfully implemented a custom spinner, perhaps one similar to what I'm using on my Instafill website? I'd love to hear about any experiences or potential limitations with this kind of customization in Retool.
@eugene_sm you can use a HTML component for this. Add some simple HTML and CSS for the spinner from a source like this: https://loading.io/css/
Then conditionally show/hide the component in Retool based on a query's isFetching property.
Here's a Retool app with a few examples: https://retool.studio/p/spinners
I'll also attach an export of this app which you can import to your own instance to see how it works.
CSS Loaders.json (36.0 KB)
3 Likes
Hi @kent,
As I didn't find a closer related topic on my question: is there any way to replace Retool native loader by a custom loading component? (so we wouldn't have to set up a custom HTML component for every loading in our Apps?)
Thank's in advance for your answers!
@Laurin_Boujon1 right now there is no way to replace the component's native loading indicators.
What I tend to do in my apps is:
- Turn off loading state app-wide in app settings
- Create a module of my custom loader, and then use that module in all the places I want to show a custom loader