Skeleton loader in course (1) page

[HDDTHR]

Summary

As a user, I'd like to switch pages in the course page without the window resizing and showing a loading animation, as it hurts the UX.

As a developer, I'd like to be able to specify the number of resources to show on the course page for each view, to allow for better customization.

Peek.2025-01-22.11-51.1.mp4

Acceptance Criteria

• Replace loading animation with a skeleton loader
• Resize the skeleton according the the resource card (in list or grid) to avoid pop-in effect
• Define two new runtime environment variables as follows
  • NUXT_RESOURCES_COUNT_GRID
  • NUXT_RESOURCES_COUNT_LIST
• Set the values to these variable to a sensible default and use them to render the number of items in the course page accordingly for each view (grid, list)
• Ensure that all is working as expected on different screen sizes and major browsers

[github-actions]

Thank you for taking the time to open an issue!
The issue is being triaged. We'll review it and get back to you.

If you're interested in resolving it yourself, be sure tell us below, and read CONTRIBUTING.md.
@Marje3PSUT/maintainers