[UI] Enhancement : Adding Skeleton Loading Screens

[NeoZ666]

Skeletons for UI Components such as Listing pages of Instructors, Institutions, Learners, and Dashboard.

Benefits of Loading Skeleton Over Normal Loader

1. Better User Experience:

   • Loading skeletons mimic the layout of the content being loaded, providing users with a sense of progress and context. This creates a smoother transition between loading states and makes the user experience more seamless.

2. Reduced Perceived Wait Time:

   • Users are more likely to perceive shorter wait times with loading skeletons compared to traditional loaders, as skeletons give the illusion that content is loading continuously rather than in one single moment.
   • Skeletons give the impression that content is loading quickly because they provide a visual representation of the structure and layout before the actual content loads. This can make the loading process feel faster to users

3. Maintains User Engagement:

   • By displaying a skeleton of the content, users are encouraged to wait for the actual content to load rather than abandoning the page. This helps maintain user engagement during loading times.

4. More Contextual Information:

   • Loading skeletons can provide more contextual information about the content being loaded compared to simple spinners or loaders. They give users a preview of where the content will be placed and its approximate size.

5. Consistency with Design:

   • Loading skeletons can be designed to match the overall style and branding of the application, providing a consistent visual experience for users during loading states.

Hence, I believe this to be a small but good feature for the Project.

[NeoZ666]

Opened up a pull request to work on this issue. Kindly check it out here