Custom loading screen
I was wondering if it is somehow possible to replace this loading screen in my app.
It always show before the app loads so i don't see any way where i could hook in and design my own.
Does wasp support that already? If so i would appreciate a short explanation on how to do so 🙂
8 Replies
Ah very good question, and this is one of the reasons why Wasp is still in Beta :D: no, you can't customize it at the moment! It is added for the pages that require a user, so while it is loading a user, it shows this Loading... : https://github.com/wasp-lang/wasp/blob/20eb9e007a7afbf9a2edf5edde7e20b596f09be0/waspc/data/Generator/templates/react-app/src/auth/pages/createAuthRequiredPage.jsx#L21 .
We really should make this customizable. There is an issue for it, so it is on our radar: https://github.com/wasp-lang/wasp/issues/1076 .
No worries. I understand, that it is still in beta. Just wanted to check, if it is possible or not. But happy to hear its on your radar 🙂
So by customizing you for example that we could define a React component (read Page) which we then can define in wasp config file. And then the wasp
createAuthRequiredPage would be pick it up? 🙂Yeah, that could be a solution! That shouldn't be too hard -> as you said, we have a place in .wasp file to define the react component that will be shown instead of Loading... .
Alternatively, we could even allow providing such config per each page, so you can customize it per page.
There is actually a way for you right now, to customize that Loading... -> actually, to drop it and implement your own. So what you can do is remove
authRequired: true from your page, that way Wasp won't be loading the user for you, and instead you do useAuth inside of your React component. Then you can show your own loading information while awaiting for the user data. Here are the docs: https://wasp-lang.dev/docs/auth/overview#using-the-useauth-hook .Oh that would also be very cool!
But i just discovered, that i also see the "Loading..." for a short time even on pages that have the
authRequired: false. So it seems there is another place where this is coming from? 🙂Wohooo @Gwaggli, you just became a Waspeteer level 3!
So that is very weird, because there is just one place in Wasp where "Loading..." is used, and that is for the pages that have require auth: https://github.com/wasp-lang/wasp/blob/5a33d3c91b373ec2c54871ae414248a7bb4fd46a/waspc/data/Generator/templates/react-app/src/auth/pages/createAuthRequiredPage.jsx#L21 .
Also, I just tried it on my own Wasp app, and I can confirm that if
authRequired is ommited, or if it is set to false, that Loading... does not happen -> I even checked the generated code, and indeed, the code Wasp generates for that page doesn't have "Loading..." in it!
Is it possible that wasp hasn't picked up your changes to the .wasp file -> have you tried re-running wasp start? Maybe you can share that piece of code where you have authRequired: false so I can check it out? Finally, you could share the whole project with me if it is open source.Silly me. On this single page i meant, i had the same "Loading..." return value while fetching the data. Everything fine, sorry for the confusion 😄
Ah hah ok on worries, I am glad it is not a bug on our side at least 😄