diff --git a/src/app/[name]/(Main)/about/AboutPage.tsx b/src/app/[name]/(Main)/about/AboutPage.tsx index 7da47f7..05efaf0 100644 --- a/src/app/[name]/(Main)/about/AboutPage.tsx +++ b/src/app/[name]/(Main)/about/AboutPage.tsx @@ -12,6 +12,7 @@ import { useQueryState } from 'next-usequerystate'; import Image from 'next/image'; import React from 'react' import { useGetAbout, useGetReviews, useGetSchedules } from './hooks/useAboutData'; +import AboutSkeleton from './components/AboutSkeleton'; const sortings = [ 'جدیدترین', @@ -20,15 +21,21 @@ const sortings = [ function AboutPage() { - const { data: aboutData } = useGetAbout(); - const { data: reviewsData } = useGetReviews(); - const { data: schedulesData } = useGetSchedules(); + const { data: aboutData, isLoading: aboutLoading } = useGetAbout(); + const { data: reviewsData, isLoading: reviewsLoading } = useGetReviews(); + const { data: schedulesData, isLoading: schedulesLoading } = useGetSchedules(); const [sorting, setSorting] = useQueryState('sortBy', { defaultValue: '0' }); const { state: sortingModal, toggle: toggleSortingModal, set: setSortingModal } = useToggle(); const restaurant = aboutData?.data; const schedules = schedulesData?.data || []; + const isLoading = aboutLoading || reviewsLoading || schedulesLoading; + + if (isLoading) { + return ; + } + const changeSorting = (index: number) => { setSorting(() => String(index)); setSortingModal(false); diff --git a/src/app/[name]/(Main)/about/components/AboutSkeleton.tsx b/src/app/[name]/(Main)/about/components/AboutSkeleton.tsx new file mode 100644 index 0000000..f29aea9 --- /dev/null +++ b/src/app/[name]/(Main)/about/components/AboutSkeleton.tsx @@ -0,0 +1,133 @@ +'use client'; + +import { Skeleton } from "@/components/ui/skeleton"; +import TabContainer from "@/components/tab/TabContainer"; +import { TabHeader } from "@/components/tab/TabHeader"; +import { InfoCircle, Star1 } from 'iconsax-react'; + +const AboutSkeleton = () => { + const firstTabSkeleton = () => ( +
+ {/* اطلاعات رستوران */} +
+
+
+ + + +
+ +
+
+ + + + +
+ + +
+
+
+ + {/* ارتباط */} +
+ +
+ {[...Array(3)].map((_, index) => ( + + ))} +
+
+ + {/* آدرس */} +
+ + + +
+ + +
+
+ + {/* ساعات کاری امروز */} +
+
+ + + + +
+ +
+ + {/* ساعات کاری هفته */} + {[...Array(3)].map((_, index) => ( +
+ + +
+ ))} +
+ ); + + const secondTabSkeleton = () => ( +
+ {/* امتیاز کاربران */} +
+ +
+ {[...Array(5)].map((_, index) => ( + + ))} +
+
+ + {/* نظرات کاربران */} +
+
+ + +
+
+ {[...Array(3)].map((_, index) => ( +
+
+ +
+ + +
+ +
+ + + +
+ ))} +
+
+
+ ); + + return ( +
+ + }> + + }> + + +
+ ); +}; + +export default AboutSkeleton; +