feat: add loading to the categories page

Author: pooriaset

src/app/[locale]/(main)/categories/loading.tsx

@@ -0,0 +1,17 @@
+import { Skeleton, Stack } from '@mui/material';
+import React from 'react';
+
+const Loading = () => {
+  return (
+    <Stack direction="row" alignItems="flex-start">
+      <Skeleton width={115} height="100%" />
+      <Stack px={1.5} gap={1} flexWrap="wrap" direction="row" flexGrow={1}>
+        {new Array(6).fill(1).map((item) => {
+          return <Skeleton width="30%" height={100} />;
+        })}
+      </Stack>
+    </Stack>
+  );
+};
+
+export default Loading;

src/app/[locale]/(main)/categories/page.tsx

@@ -7,6 +7,7 @@ import { Stack } from '@mui/material';
 import { useEffect, useState } from 'react';
 import MenuCategoryItem from './components/MenuCategoryItem';
 import SubCategories from './components/SubCategories';
+import Loading from './loading';
 
 const page = () => {
   const { data, loading } = useQuery<CategoriesQuery>(
@@ -28,8 +29,8 @@ const page = () => {
     }
   }, [loading]);
 
-  if (loading || !selected) {
-    return <>Loading</>;
+  if (!loading || !selected) {
+    return <Loading />;
   }
 
   return (