danak/dkala-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

skeleton with custom view

Browse Source
This commit is contained in:
hamid zarghami
2026-02-14 12:25:40 +03:30
parent 1964255424
commit 6dc2e00692
2 changed files with 44 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[name]/(Main)/components/MenuSkeleton.tsx
+43 -18
View File
@@ -3,8 +3,13 @@
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import VerticalScrollView from "@/components/listview/VerticalScrollView"; import VerticalScrollView from "@/components/listview/VerticalScrollView";
import MenuItemRenderer from "@/components/listview/MenuItemRenderer"; import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
import type { MenuItemViewMode } from "@/components/listview/MenuItem";
const MenuSkeleton = () => { interface MenuSkeletonProps {
viewMode?: MenuItemViewMode;
}
const MenuSkeleton = ({ viewMode = 'list' }: MenuSkeletonProps) => {
return ( return (
<div className="flex flex-col gap-4 items-center pt-8 mb-8"> <div className="flex flex-col gap-4 items-center pt-8 mb-8">
<div className="w-full"> <div className="w-full">
@@ -26,26 +31,46 @@ const MenuSkeleton = () => {
</div> </div>
<VerticalScrollView className="mt-5! overflow-y-auto h-full"> <VerticalScrollView className="mt-5! overflow-y-auto h-full">
{[...Array(6)].map((_, index) => ( {viewMode === 'grid' ? (
<MenuItemRenderer key={index}> <div className="grid grid-cols-2 gap-3">
<div className="flex gap-4 w-full h-full items-center"> {[...Array(6)].map((_, index) => (
<Skeleton className="min-w-28 w-28 h-28 rounded-xl" /> <MenuItemRenderer key={index} variant="grid">
<div className="w-full inline-flex flex-col justify-between"> <div className="flex flex-col w-full h-full">
<div> <Skeleton className="rounded-xl aspect-square max-h-[100px] w-full" />
<Skeleton className="h-5 w-32 rounded-md mb-2" /> <div className="mt-4">
<Skeleton className="h-4 w-full rounded-md mb-1" /> <Skeleton className="h-5 w-full rounded-md mb-1" />
<Skeleton className="h-4 w-3/4 rounded-md" /> <Skeleton className="h-4 w-3/4 rounded-md" />
</div> </div>
<div className="inline-flex mt-2 gap-2 justify-between w-full items-center"> <div className="flex flex-col gap-2 mt-1">
<div className="w-full flex flex-col gap-1"> <Skeleton className="h-4 w-16 rounded-md" />
<Skeleton className="h-4 w-16 rounded-md" /> <Skeleton className="w-full h-8 rounded-md mt-1" />
</div>
</div>
</MenuItemRenderer>
))}
</div>
) : (
[...Array(6)].map((_, index) => (
<MenuItemRenderer key={index} variant="list">
<div className="flex gap-4 w-full h-full items-center">
<Skeleton className="min-w-28 w-28 h-28 rounded-xl" />
<div className="w-full inline-flex flex-col justify-between">
<div>
<Skeleton className="h-5 w-32 rounded-md mb-2" />
<Skeleton className="h-4 w-full rounded-md mb-1" />
<Skeleton className="h-4 w-3/4 rounded-md" />
</div>
<div className="inline-flex mt-2 gap-2 justify-between w-full items-center">
<div className="w-full flex flex-col gap-1">
<Skeleton className="h-4 w-16 rounded-md" />
</div>
<Skeleton className="max-w-[115px] w-full h-8 rounded-md" />
</div> </div>
<Skeleton className="max-w-[115px] w-full h-8 rounded-md" />
</div> </div>
</div> </div>
</div> </MenuItemRenderer>
</MenuItemRenderer> ))
))} )}
</VerticalScrollView> </VerticalScrollView>
</section> </section>
</div> </div>
src/app/[name]/(Main)/page.tsx
+1 -1
View File
@@ -152,7 +152,7 @@ const MenuIndex = () => {
}, [selectedCategory, search, filterSearch, products, sorting]); }, [selectedCategory, search, filterSearch, products, sorting]);
if (isLoading) { if (isLoading) {
return <MenuSkeleton />; return <MenuSkeleton viewMode={viewMode} />;
} }
return ( return (