W
Wasp-langβ€’14mo ago
Gwaggli

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 πŸ™‚
No description
8 Replies
martinsos
martinsosβ€’14mo ago
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 .
Gwaggli
Gwaggliβ€’14mo ago
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? πŸ™‚
martinsos
martinsosβ€’14mo ago
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 .
Gwaggli
Gwaggliβ€’14mo ago
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? πŸ™‚
MEE6
MEE6β€’14mo ago
Wohooo @Gwaggli, you just became a Waspeteer level 3!
martinsos
martinsosβ€’14mo ago
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.
Gwaggli
Gwaggliβ€’14mo ago
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 πŸ˜„
martinsos
martinsosβ€’14mo ago
Ah hah ok on worries, I am glad it is not a bug on our side at least πŸ˜„
Want results from more Discord servers?
Add your server