[IMPROVEMENT: FRONT-END] Add skeleton loading for `explore/catalogs`, `explore/archives` & `/explore`

[realChakrawarti]

Currently, in /explore/catalogs, /explore/archives and /explore pages, before the content loads, a spinner is being used to indicate its loading state. (See attached screenshot below)

Requirements:

1. Make use of loading.tsx (app router: reference)
2. Create a skeleton based on the respective page content
3. Ensure that the skeleton dimension is in sync with the content in different viewports -- responsive

---

Reference:

This approach is already being used for individual catalogs, you can see it in action here: https://ingest.707x.in/c/CaEMeG [Make sure network is throttled to 3G from dev tools] and for code reference:

• src/app/(views)/(public-catalog)/c/[catalogId]/loading.tsx -> src/views/public-catalog/skeleton-loader.tsx

[Gunvir123]

Hi @realChakrawarti !
I can work on this

[realChakrawarti]

Hi @Gunvir123, I have assigned you the issue.

[realChakrawarti]

Hi @Gunvir123, just following up on the progress. If you are stuck anywhere please do reach out to me.