Implement Skeleton Loaders for News Pages (Extend SkeletonLoader.tsx)

[Skoivumaki]

✨ Enhancement Description

Provide a brief description of the enhancement or improvement being suggested:

• What is it?: Implement skeleton loaders on the News page to improve loading states. Enhance the existing SkeletonLoader.tsx component by adding custom skeleton variants specifically for NewsPage and NewsElementPage.
• Why improve it?: The current loading experience is either generic or missing for news-related views, which can feel unresponsive. Tailored skeleton loaders will better reflect the final layout and improve perceived performance.

---

🌟 Benefits of the Enhancement

Explain how this enhancement will improve the project or user experience:

• User Experience: Provides immediate visual feedback while news content is loading, reducing perceived wait times and layout shifts.
• Project Impact: Improves UI consistency and reusability by centralizing skeleton logic in SkeletonLoader.tsx, making future maintenance and extensions easier.

---

🛠️ Proposed Implementation

Outline how the enhancement could be implemented, including any technical considerations:

• Technical Details:

  • Existing SkeletonLoader.tsx component
  • New skeleton variants for NewsPage and NewsElementPage
  • Conditional rendering based on loading state

• Implementation Plan:

  1. Review the layout structure of NewsPage and NewsElementPage.
  2. Extend SkeletonLoader.tsx to support custom skeleton configurations for news-related pages.
  3. Implement skeleton loaders in NewsPage while news lists are loading.
  4. Implement skeleton loaders in NewsElementPage while individual news items are loading.
  5. Ensure skeletons closely match the final layout to minimize layout shift for both mobile and desktop. (doesn't need to match 100%)
  6. Verify that skeleton loaders are displayed and removed correctly based on loading state.

---

📎 Additional Information

Include any additional context, examples, or resources that could help in understanding or implementing the enhancement:

• Links & References:
  • Visual examples of what Skeleton Loading looks like: https://vuetifyjs.com/en/components/skeleton-loaders/#props
• Mockups/Examples:
  NewsElementPage (needs isLoading):

NewsPage: