feat/ Loading Screen #49
Conversation
src/ui/Overlay.js
Outdated
| <Suspense fallback={<Ready setReady={setReady} />}>{children}</Suspense> | ||
| <div className={`fullscreen bg ${ready ? 'ready' : 'notready'} ${clicked && 'clicked'}`}> | ||
| {!ready ? <Loader /> : | ||
| <> |
There was a problem hiding this comment.
I was hoping to make use of the useProgress hook from https://github.com/pmndrs/drei
and the loader should replace Ready
| <Suspense fallback={<Ready setReady={setReady} />}>{children}</Suspense> | |
| <div className={`fullscreen bg ${ready ? 'ready' : 'notready'} ${clicked && 'clicked'}`}> | |
| {!ready ? <Loader /> : | |
| <> | |
| <Suspense fallback={<Loader setReady={setReady} />}>{children}</Suspense> | |
| <div className={`fullscreen bg ${ready ? 'ready' : 'notready'} ${clicked && 'clicked'}`}> | |
| <div className="stack"> |
There was a problem hiding this comment.
So I just implemented the loading screen as a fallback so the loading screen now appears after 'Click to continue' is pressed (it will show for maybe a second or two max). Is this what you wanted?
Edit: The loading will pretty much be at or close to 100% by the time the user clicks also.
There was a problem hiding this comment.
Yes that sounds about correct, it's just to make sure everything is loaded by the time the user wants to view the scene.. as a fallback
| useEffect(() => () => void setReady(true), []) | ||
| return null | ||
| function Ready() { | ||
| const { progress } = useProgress() |
There was a problem hiding this comment.
We want ready to be set as true when progress is complete
| const { progress } = useProgress() | |
| const { progress } = useProgress() | |
| useEffect(() => { | |
| if(progress !== 100) { return } | |
| setReady(true) | |
| }, [progress]) |
There was a problem hiding this comment.
So I added setReady back along with the other stuff that conditionally rendered based on ready. I'm curious as to why the ready state is preferred since it seems like the loading screen will never be triggered or is that the point?
|
Does this show the keys like the current loading screen, I think that would be nice. Basically just giving it a background image and some styles? I would build on the current one that has all the poimandres info. Maybe even just use progress + image |
No, this is currently a separate loading page that will display between the keys and the scene as a fallback. |
|
maybe we should do something more stylized. we have a blender file that could be rendered out in a really fancy way. we can play around with some variants before committing. |
|
ive added useprogress to the black loading screen. we could leave this open and collect ideas for some replacement. |
resolves #9
Let me know if anything needs to be changed.