fix: resolve ui problems

Author: pooriaset

public/assets/images/placeholders/no-image.jpg

@@ -1,22 +1,28 @@
-import { Box, Grid, Skeleton } from '@mui/material';
+import { Box, Container, Grid, Skeleton } from '@mui/material';
 
 const Loading = () => {
   return (
-    <>
-      <Skeleton variant="rectangular" height={350} />
-      <Grid container spacing={1}>
-        {new Array(4).fill(1).map((item, index) => {
-          return (
-            <Grid key={index} item xs={12} md={6} lg={4} xl={3}>
-              <Box>
-                <Skeleton variant="rectangular" height={120} />
-                <Skeleton variant="text" width={60} />
-              </Box>
-            </Grid>
-          );
-        })}
+    <Container maxWidth="xl">
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <Skeleton variant="rectangular" height={350} />
+        </Grid>
+        <Grid item xs={12}>
+          <Grid container spacing={2}>
+            {new Array(4).fill(1).map((item, index) => {
+              return (
+                <Grid key={index} item xs={12} md={6} lg={4} xl={3}>
+                  <Box>
+                    <Skeleton variant="rectangular" height={120} />
+                    <Skeleton variant="text" width={60} />
+                  </Box>
+                </Grid>
+              );
+            })}
+          </Grid>
+        </Grid>
       </Grid>
-    </>
+    </Container>
   );
 };
 

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

@@ -16,7 +16,7 @@ export interface MainCategoriesProps {
 }
 const MainCategories: FC<MainCategoriesProps> = ({ items }) => {
   return (
-    <Grid container spacing={2} justifyContent="center">
+    <Grid container spacing={2}>
       {items.map((item) => {
         const params = new URLSearchParams();
         params.set('categoryId', item.id.toString());