Feat: Add Skeleton for Fetching Data and Fix Shake Effect in Journals and Profiles

[itznayan]

What feature would you like to see? I would like to see the implementation of a skeleton screen that appears while fetching data. This would provide users with a better loading experience, rather than seeing empty or blank screens. Additionally, I would like to see a fix for the shake effect that occurs when navigating through journals and profiles.

Why is this feature useful? Skeleton for Data Fetching: A skeleton loader gives users visual feedback that content is loading and enhances the user experience by making transitions smoother. This prevents users from seeing abrupt jumps from blank to fully loaded content, improving overall usability.

Fixing the Shake Effect: Resolving the shake effect in journals and profiles would create a smoother navigation experience, eliminating distractions caused by unintended visual shaking during transitions or page loads.

How important is this feature to you? Should have

Have you seen this feature in other projects? Yes, I've seen something similar elsewhere (e.g., many web apps and mobile apps use skeleton loaders while fetching data)

Any other details? For the skeleton, the loading structure could mimic the shape of the content being loaded (e.g., rectangles for images or lines for text). The shake effect in journals and profiles might be caused by layout shifts or CSS transitions that are not smooth. Investigating and fixing the root cause (perhaps by adjusting margins, padding, or animations) would likely resolve the issue.

Would you like to work on this feature? Yes, I'd like to try implementing this feature I can help with testing

https://github.com/user-attachments/assets/3b9fba7d-349e-476c-95c8-1abc8e59afc5

[itznayan]

@aswathcm29 Please Assign this issue to me .provide me necessary tag for GSSOC'24 and Hackerfest Tag.