search

bsoc-bitbyte / BSoC-Website

BitByte Summer of Code Website
https://bitbytesummerofcode.netlify.app/
8 stars 34 forks source link

[Feature Request]: Add a skeleton screen in the dashboard page #102

Closed Kaarti22 closed 2 months ago

Kaarti22 commented 3 months ago

Is your feature request related to a problem? Please describe.

At present, when we click on the dashboard page, it takes some time to load the data. Until then, it shows a text like "No result". If the network speed is low and if the website takes more time than usual to load the data, the user sees this message. We don't want that to happen.

Describe the solution you'd like

Implement a skeleton screen in the dashboard page. Until the data gets loaded, the skeleton screen should be displayed giving a loading feel to the users. Even if the data is fetched, show the screen till 2-3 seconds to give a loading experience to the user. Then show the dashboard view.

Describe alternatives you've considered

No response

Developer Help

No response

rohansen856 commented 3 months ago

@Kaarti22 i would like to work on this issue. I would use a simple loading state to show the skeleton until the data is fetched and also use simple css to build the skeleton.

Kaarti22 commented 3 months ago

You could start implementing now...

rohansen856 commented 3 months ago

@Kaarti22 i have made a simple loader that looks like this:

https://github.com/bsoc-bitbyte/BSoC-Website/assets/108976786/9f38ec8f-f741-4a9c-988c-d4be669c6f34

for a better look you can see this video where i used a simple sleep function to simulate slow internet speed:

https://github.com/bsoc-bitbyte/BSoC-Website/assets/108976786/a34add4f-bdc0-4d35-bf8f-1602e495215d

please suggest if any changes are necessary..