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: 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 <AboutSkeleton />;
+  }
+
   const changeSorting = (index: number) => {
     setSorting(() => String(index));
     setSortingModal(false);