search

tide-app / tide

Explore a world of sounds!
https://tide-app.vercel.app/
MIT License
10 stars 4 forks source link

feat: show loading state (skeleton loader) #16

Open amilajack opened 4 years ago

amilajack commented 4 years ago

we need to update the UI to show the user that the current sound is loading. i recommend we take a look at modern skeleton loading approaches with the following libraries:

https://create-content-loader.now.sh https://github.com/dvtng/react-loading-skeleton

hamirmahal commented 4 years ago

I was just thinking of doing

isLoading ? Loading... : <Sound />

and similar ternaries for other components like the sound list.

It definitely doesn't look as nice and might cause "mis-clicks" when a user clicks on something that moves around after the page finishes loading. On the plus side, it might make the codebase easier to parse for developers and make the codebase smaller. @amilajack and @akshara-sun, what do you think?

amilajack commented 4 years ago

Yea using ternary operators to conditionally show components based on loading state is delightfully simple to developers but it usually doesn't translate to a very good user experience. For now, ternary operators are fine. This backlog item is definitely something we'll be looking into a lot later.