about page skeleton

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: aboutData, isLoading: aboutLoading } = useGetAbout();
-  const { data: reviewsData } = useGetReviews();
+  const { data: reviewsData, isLoading: reviewsLoading } = useGetReviews();
-  const { data: schedulesData } = useGetSchedules();
+  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 <AboutSkeleton />;
+  }
+
   const changeSorting = (index: number) => {
     setSorting(() => String(index));
     setSortingModal(false);

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 = () => (
+    <section className='py-4'>
+      {/* اطلاعات رستوران */}
+      <section className="bg-container rounded-container shadow-container p-4">
+        <div className="flex justify-between items-center border-b-[1.5px] border-gray-200 pb-[25px]">
+          <div className="flex-1">
+            <Skeleton className="h-6 w-32 rounded-md mb-4" />
+            <Skeleton className="h-5 w-24 rounded-md mb-2" />
+            <Skeleton className="h-5 w-40 rounded-md" />
+          </div>
+          <Skeleton className="w-22 h-22 rounded-normal shrink-0" />
+        </div>
+        <div className="mt-[23px]">
+          <Skeleton className="h-5 w-28 rounded-md mb-3" />
+          <Skeleton className="h-4 w-full rounded-md mb-2" />
+          <Skeleton className="h-4 w-full rounded-md mb-2" />
+          <Skeleton className="h-4 w-3/4 rounded-md mb-[23px]" />
+          <div className='inline-flex gap-2 items-center'>
+            <Skeleton className="w-5 h-5 rounded-md" />
+            <Skeleton className="h-5 w-24 rounded-md" />
+          </div>
+        </div>
+      </section>
+
+      {/* ارتباط */}
+      <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center">
+        <Skeleton className="h-5 w-16 rounded-md" />
+        <div className='col-span-1 text-center flex justify-center gap-4'>
+          {[...Array(3)].map((_, index) => (
+            <Skeleton key={index} className="w-10 h-10 rounded-normal" />
+          ))}
+        </div>
+      </section>
+
+      {/* آدرس */}
+      <section className="bg-container rounded-container shadow-container px-4 pt-6 pb-6 mt-4">
+        <Skeleton className="h-5 w-12 rounded-md mb-[9px]" />
+        <Skeleton className="h-4 w-full rounded-md mb-2" />
+        <Skeleton className="h-4 w-3/4 rounded-md mb-[23px]" />
+        <div className='inline-flex gap-2 items-center'>
+          <Skeleton className="w-5 h-5 rounded-md" />
+          <Skeleton className="h-5 w-24 rounded-md" />
+        </div>
+      </section>
+
+      {/* ساعات کاری امروز */}
+      <section className="bg-container rounded-container shadow-container py-6 px-4 mt-4 flex justify-between items-center">
+        <div className="flex items-center gap-2">
+          <Skeleton className="w-4 h-4 rounded-full" />
+          <Skeleton className="h-5 w-8 rounded-md" />
+          <Skeleton className="w-1.5 h-1.5 rounded-full" />
+          <Skeleton className="h-5 w-32 rounded-md" />
+        </div>
+        <Skeleton className="w-4 h-4 rounded-md" />
+      </section>
+
+      {/* ساعات کاری هفته */}
+      {[...Array(3)].map((_, index) => (
+        <div
+          key={index}
+          className="bg-[#F6F6FA] dark:bg-border rounded-container leading-5 py-6 px-4 mt-4 flex justify-between items-center">
+          <Skeleton className="h-5 w-20 rounded-md" />
+          <Skeleton className="h-5 w-24 rounded-md" />
+        </div>
+      ))}
+    </section>
+  );
+
+  const secondTabSkeleton = () => (
+    <section className='py-4'>
+      {/* امتیاز کاربران */}
+      <section className="bg-container rounded-container shadow-container p-4 py-6 grid grid-cols-2 items-center">
+        <Skeleton className="h-16 w-20 rounded-md mx-auto" />
+        <div className="flex flex-col w-fit items-end gap-1">
+          {[...Array(5)].map((_, index) => (
+            <Skeleton key={index} className="h-4 w-24 rounded-md" />
+          ))}
+        </div>
+      </section>
+
+      {/* نظرات کاربران */}
+      <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
+        <div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
+          <Skeleton className="h-5 w-24 rounded-md" />
+          <Skeleton className="h-8 w-28 rounded-xl" />
+        </div>
+        <div className="">
+          {[...Array(3)].map((_, index) => (
+            <div key={index} className="pt-8">
+              <div className="flex items-center gap-3 mb-3">
+                <Skeleton className="w-10 h-10 rounded-full" />
+                <div className="flex-1">
+                  <Skeleton className="h-4 w-24 rounded-md mb-2" />
+                  <Skeleton className="h-3 w-16 rounded-md" />
+                </div>
+                <Skeleton className="h-4 w-12 rounded-md" />
+              </div>
+              <Skeleton className="h-4 w-full rounded-md mb-2" />
+              <Skeleton className="h-4 w-3/4 rounded-md mb-4" />
+              <Skeleton className="h-3 w-20 rounded-md" />
+            </div>
+          ))}
+        </div>
+      </section>
+    </section>
+  );
+
+  return (
+    <div className='pt-8 h-full overflow-y-auto noscrollbar'>
+      <TabContainer>
+        <TabHeader
+          viewRenderer={firstTabSkeleton()}
+          title='درباره ما' icon={<InfoCircle size={24} />}>
+        </TabHeader>
+        <TabHeader
+          viewRenderer={secondTabSkeleton()}
+          title='امتیازات و نظرات' icon={<Star1 size={24} />}>
+        </TabHeader>
+      </TabContainer>
+    </div>
+  );
+};
+
+export default AboutSkeleton;
+