Existing Loader component is not visible during application startup

[Mradul-0605]

Description

The project already contains a Loader.jsx component, but the loader is currently not rendered or integrated into the main application flow during initial startup/loading.

Expected Behavior

A loading screen/spinner should appear briefly while the application initializes or routes are loading.

Current Behavior

The application directly renders the main routes without displaying the existing loader component.

Possible Improvement

Integrate the existing Loader.jsx component into the app startup flow (for example in App.jsx) to improve user experience during initial load.

[rdodiya]

Hi @Mradul-0605,

The existing Loader.jsx is currently used for the public restaurant website (template side), i.e., customer-facing pages.

Instead of modifying that, can you please work on improving the admin side loading experience?

💡 Suggested Task

Implement auto-generated Skeleton Loaders for the admin dashboard sections (Orders, Menu, Categories, etc.)

Reference library:
boneyard Skeleton Loader)

🎯 Expected Outcome

• Smooth skeleton loading state in admin UI
• Better UX while data is being fetched
• No blank screens during API calls
• Consistent loading experience across admin pages

If possible, try to make the skeleton components reusable so they can be used across different modules.

Let me know if you need any clarification 👍

[Mradul-0605]

Hi @rdodiya ,

I reviewed the admin pages locally and noticed that skeleton loaders are already implemented in several sections (for example, Live Orders and Menu pages). From what I observed, many skeleton components are currently defined inline within individual files rather than being reusable/shared components.

To align with the suggested improvement and the reusable approach you mentioned, I am planning to refactor the admin loading system by extracting reusable skeleton components (for cards, orders, stats, etc.) into shared/common components and then reusing them across admin modules for a more consistent loading experience.

Please let me know if this direction matches the intended enhancement before I proceed further 👍

[SamSana-00]

Hi @rdodiya, I would like to work on this enhancement under GSSoC'26. I have gone through the contribution guidelines and would like to contribute. Please assign it to me.

[rdodiya]

Hi @SamSana-00 ,
Please create a custom skeleton loader component and use it in any 1 section like food items and raise the Pr and let me review it first before proceeding for others and also note that every card view has list view toggle button which is resolved under other issue

[Mradul-0605]

Hi @rdodiya 👋

I had actually completed this task earlier as well, but at that time the repository had restrictions on pull requests and issue comments for new contributors, so I was unable to submit the PR or comment on the issue.

[SamSana-00]

Hi @rdodiya,
Thank you for the direction! I will create a custom skeleton loader component and integrate it into the food items section first, then raise a PR for your review before proceeding to other sections.
Also noted that the card/list view toggle is being handled under a separate issue.

[SamSana-00]

Hi @rdodiya,
I have created a reusable FoodItemCardSkeleton component at src/components/common/skeletons/FoodItemCardSkeleton.jsx and integrated it into the Food Items section by updating FoodItemsGrid.jsx to import and use it instead of the inline skeleton.
Please review PR #141 when you get a chance!