refactor(admin): centralize reusable skeleton loaders#130
Open
Mradul-0605 wants to merge 2 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors per-feature skeleton loader components in the admin module into a single reusable AdminSkeleton component that accepts a variant prop, and updates all consumers (Orders, Menu, Categories, Tables, Branches, UPI, Stats, Revenue Chart, Live Orders) to use it.
Changes:
- Adds
AdminSkeleton.jsxwith aswitch(variant)that returns one of 8 skeleton layouts (order,stats,chart,category,food-card,menu-card,order-card,branch,table,upi). - Removes the per-file private skeleton components from 8 grid/section files and replaces them with
<AdminSkeleton variant="..." />. - Modifies
package-lock.jsonwith a large set of unrelated transitive dependency additions and dev-flag changes.
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
RestroHub-FrontEnd/src/components/admin/AdminSkeleton.jsx |
New centralized skeleton component; inconsistent case indentation. |
RestroHub-FrontEnd/src/components/admin/upi/UPIGrid.jsx |
Replaces local UPISkeleton with AdminSkeleton variant="upi". |
RestroHub-FrontEnd/src/components/admin/store/tables/TablesGrid.jsx |
Replaces local TableSkeleton with variant="table". |
RestroHub-FrontEnd/src/components/admin/store/branch/BranchesGrid.jsx |
Replaces local BranchSkeleton with variant="branch". |
RestroHub-FrontEnd/src/components/admin/orders/orderComponents/OrdersGrid.jsx |
Replaces local OrderCardSkeleton with variant="order-card". |
RestroHub-FrontEnd/src/components/admin/menu/menuCard/MenusGrid.jsx |
Replaces local MenuCardSkeleton with variant="menu-card". |
RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemsGrid.jsx |
Replaces local CardSkeleton with variant="food-card". |
RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategorySidebar.jsx |
Replaces local CategorySkeleton with variant="category". |
RestroHub-FrontEnd/src/components/admin/dashboard/cards/StatsSection.jsx |
Switches to variant="stats"; local StatCardSkeleton left dead in file. |
RestroHub-FrontEnd/src/components/admin/dashboard/cards/RevenueChart.jsx |
Adds <AdminSkeleton variant="chart" /> but leaves the old skeleton <div> sibling, producing invalid JSX. |
RestroHub-FrontEnd/src/components/admin/dashboard/cards/LiveOrders.jsx |
Mis-applied block comment leaves the file syntactically broken; duplicated/unreachable ternary branches and a reference to a now-undefined OrderSkeleton. |
RestroHub-FrontEnd/package-lock.json |
Large, unrelated dependency churn (socket.io 1.x, connect 2.x, boneyard, react-loading-skeleton, etc.) unrelated to the PR. |
Files not reviewed (1)
- RestroHub-FrontEnd/package-lock.json: Language not supported
Comments suppressed due to low confidence (1)
RestroHub-FrontEnd/src/components/admin/dashboard/cards/LiveOrders.jsx:177
- The loading branch of this ternary now contains two unwrapped expressions on separate lines (the
.map(...)returning<AdminSkeleton>followed by anothererror && orders.length === 0 ? ...branch with another.map(...)returning the now-undefined<OrderSkeleton>). The parentheses/braces are also mismatched ())}on line 173 closes prematurely) and there are two duplicateerror && orders.length === 0 ?branches (lines 174 and 177), so the second one is unreachable. The whole conditional needs to be rewritten — keep a single skeleton branch (loading ? [1,2,3,4].map(i => <AdminSkeleton key={i} variant="order" />) : ...) and a single error branch.
{loading ? (
[1, 2, 3, 4].map(i => (
<AdminSkeleton key={i} variant="order" />))
) : error && orders.length === 0 ? (
// Error State
[1, 2, 3, 4].map(i => <OrderSkeleton key={i} />)
) : error && orders.length === 0 ? (
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
61
to
85
| @@ -70,6 +78,9 @@ const OrderSkeleton = () => { | |||
| </div> | |||
| <div className={`w-16 h-5 rounded ${isDark ? 'bg-gray-700' : 'bg-gray-200'}`} /> | |||
| </div> | |||
| <div className="w-16 h-5 bg-gray-200 rounded" /> | |||
| </div> | |||
| );*/ | |||
| ); | |||
| }; | |||
Comment on lines
89
to
91
| <div className={`w-full h-full rounded-xl animate-pulse flex items-center justify-center ${isDark ? 'bg-gray-700' : 'bg-gray-100'}`}> | ||
| <RefreshCw className={`w-8 h-8 animate-spin ${isDark ? 'text-gray-600' : 'text-gray-300'}`} /> | ||
| </div> |
Comment on lines
+2156
to
+2178
| "node_modules/accepts": { | ||
| "version": "1.1.4", | ||
| "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.1.4.tgz", | ||
| "integrity": "sha512-8EKM6XlFgqSpDcxkT9yxCT8nDSWEVBD0UjgUWMCWh5kH9VU+ar2MhmDDYGxohXujPU8PPz88ukpkvfXFVWygHw==", | ||
| "license": "MIT", | ||
| "dependencies": { | ||
| "mime-types": "~2.0.4", | ||
| "negotiator": "0.4.9" | ||
| }, | ||
| "engines": { | ||
| "node": ">= 0.8" | ||
| } | ||
| }, | ||
| "node_modules/accepts/node_modules/mime-db": { | ||
| "version": "1.12.0", | ||
| "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.12.0.tgz", | ||
| "integrity": "sha512-5aMAW7I4jZoZB27fXRuekqc4DVvJ7+hM8UcWrNj2mqibE54gXgPSonBYBdQW5hyaVNGmiYjY0ZMqn9fBefWYvA==", | ||
| "license": "MIT", | ||
| "engines": { | ||
| "node": ">= 0.6" | ||
| } | ||
| }, | ||
| "node_modules/accepts/node_modules/mime-types": { |
Comment on lines
+223
to
+276
| case 'table': | ||
| return ( | ||
| <div className="overflow-hidden rounded-2xl border-2 border-gray-200 bg-white animate-pulse"> | ||
| <div className="px-4 py-5 text-center"> | ||
| <div className="mx-auto mb-2 h-14 w-14 rounded-xl bg-gray-100" /> | ||
| <div className="mx-auto mb-1 h-4 w-14 rounded bg-gray-100" /> | ||
| <div className="mx-auto mb-2 h-3 w-12 rounded bg-gray-100" /> | ||
| <div className="mx-auto h-5 w-16 rounded-full bg-gray-100" /> | ||
| </div> | ||
|
|
||
| <div className="flex justify-center gap-2 border-t border-gray-100 px-3 py-3"> | ||
| <div className="h-8 w-8 rounded-lg bg-gray-100" /> | ||
| <div className="h-8 w-8 rounded-lg bg-gray-100" /> | ||
| <div className="h-8 w-8 rounded-lg bg-gray-100" /> | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| case 'upi': | ||
| return ( | ||
| <div className="overflow-hidden rounded-2xl border border-gray-200 bg-white animate-pulse"> | ||
| {/* Header */} | ||
| <div className="border-b border-gray-100 px-4 py-4 sm:px-6 sm:py-5"> | ||
| <div className="flex items-start gap-3"> | ||
| <div className="h-10 w-10 shrink-0 rounded-xl bg-gray-100 sm:h-12 sm:w-12" /> | ||
|
|
||
| <div className="flex-1"> | ||
| <div className="mb-2 h-5 w-32 rounded bg-gray-100" /> | ||
| <div className="h-4 w-40 rounded bg-gray-100" /> | ||
| </div> | ||
|
|
||
| <div className="h-9 w-9 rounded-lg bg-gray-100" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Body */} | ||
| <div className="px-4 py-4 sm:px-6 sm:py-5"> | ||
| <div className="grid grid-cols-2 gap-3"> | ||
| <div className="h-20 rounded-xl bg-gray-100" /> | ||
| <div className="h-20 rounded-xl bg-gray-100" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Footer */} | ||
| <div className="border-t border-gray-100 px-4 py-3 sm:px-6 sm:py-4"> | ||
| <div className="flex gap-2"> | ||
| <div className="h-10 flex-1 rounded-lg bg-gray-100" /> | ||
| <div className="h-10 flex-1 rounded-lg bg-gray-100" /> | ||
| <div className="h-10 w-10 rounded-lg bg-gray-100" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #37
Rationale for this change
The admin dashboard showed blank spaces while data was loading, which affected the user experience. This PR improves the loading experience by adding reusable skeleton loaders across admin modules.
What changes are included in this PR?
Added reusable skeleton loader component for admin dashboard
Implemented reusable skeleton functions/components such as:
OrderSkeleton
StatCardSkeleton
MenuCardSkeleton
BranchSkeleton
TableSkeleton
UPISkeleton
and they can be used whenever required.
Implemented skeleton loaders for Orders, Menu, Categories, Tables, UPI, Revenue Chart, and other admin sections
Improved loading consistency across admin pages
Are these changes tested?
Yes.
Tested by simulating slow network conditions and verifying:
Skeleton loaders appear correctly during API fetch
Layout remains responsive
No console errors occur
Existing functionality remains unaffected
Are there any user-facing changes?
Yes.
Admin users now see smooth skeleton loading states instead of blank screens while content is loading, improving overall UX.