Refactor: Implement Reusable Loading Screen Logic

[hemant14050]

Description

This issue aims to refactor the codebase by introducing a reusable logic for rendering loading screen elements based on specific collections like latestPosts and posts. The proposed approach involves creating a new function that accepts three parameters:

1. Collections (latestPosts, posts)
2. Type of collection (enums like HOME_POST, FEATURED_POST, LATEST_POST)
3. Boolean value indicating whether to render loading skeletons (isSkeleton)

The new function will utilize these parameters to generate loading screen elements dynamically based on the specified collection and type. This refactor ensures a cleaner, more maintainable codebase by abstracting the loading screen logic into a reusable function, thereby enhancing code readability and reducing redundancy.

Current Behavior

The loading screen elements are currently implemented separately for different sections, leading to redundant code for generating loading skeletons.

Proposed Enhancement

To create a reusable function that generates loading screen elements based on the specified collection type and a boolean flag indicating the need for loading skeletons. This enhancement will improve code maintainability and reduce redundancy.

Use Case

When a user navigates to different sections/pages requiring loading screen elements for different collections (such as home posts, featured posts, latest posts), this function can be invoked with parameters to generate loading skeletons dynamically.

Blockers

No response

Additional Information/ Attachments

No response

[krishnaacharyaa]

Thank you @hemant14050 for creating the issue, please let us know if you are interested, we'll assign it to you :)

[hemant14050]

Thanks for asking @krishnaacharyaa, please assign it to me :)

[chinmaykunkikar]

@hemant14050 I'd like to ask you for some more clarification on this:

Tell me if I understand this correctly: You are proposing to dynamically show which posts are fetched from the collections and if the post is fetched, a bool will set loading to false for that specific post?

Let's say I have 10 posts, and I just refreshed the page, and it takes 10 seconds to completely load my page. So, after your implementation, will it look like this?

0th second (nothing is fetched yet): Skeleton Skeleton Skeleton Skeleton Skeleton Skeleton Skeleton Skeleton Skeleton Skeleton

2nd second (2nd and 7th post is fetched): Skeleton Post visible Skeleton Skeleton Skeleton Skeleton Post Visible Skeleton Skeleton Skeleton

5th second (4 posts fetched): Skeleton Post visible Skeleton Post Visible Skeleton Skeleton Post Visible Post Visible Skeleton Skeleton

10th second (all posts fetched): Post Visible Post Visible Post Visible Post Visible Post Visible Post Visible Post Visible Post Visible Post Visible Post Visible

Thanks.

[krishnaacharyaa]

This is interesting @chinmaykunkikar, but presently this happens because of the image rendering, but not sure if this parallel fetching of post is even possible, happy to know the approach though,

But the whole idea was to just refactor the code, No changes with respect to the visual appearance in the application. Focusing on DX mostly than UX here.