Optimize skeleton loading with array mapping and adjust responsive s…

…tyles for components
jamalsoueidan · Mar 29, 2024 · beca643 · beca643
1 parent c196077
commit beca643
Showing 1 changed file with 15 additions and 19 deletions.
diff --git a/app/routes/($locale)._index.tsx b/app/routes/($locale)._index.tsx
@@ -180,14 +180,10 @@ function FeaturedArtists({
 
           <SimpleGrid cols={{base: 2, sm: 3, md: 5}} spacing="xl">
             <Suspense
-              fallback={
-                <>
-                  <Skeleton height={50} />
-                  <Skeleton height={50} />
-                  <Skeleton height={50} />
-                  <Skeleton height={50} />
-                </>
-              }
+              fallback={[...Array(5)].map((_, index) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <Skeleton key={index} height={50} />
+              ))}
             >
               <Await resolve={artists}>
                 {({payload}) =>
@@ -214,15 +210,15 @@ function RecommendedTreatments({
   const AUTOPLAY_DELAY = useRef(Autoplay({delay: 2000}));
 
   return (
-    <Box bg="pink.1" py="60" px="xl">
+    <Box bg="pink.1" py="60" px="xl" style={{overflow: 'hidden'}}>
       <Stack gap="xl">
         <Container size="xl">
           <Title
             order={2}
             ta="center"
             lts="1px"
             fw={500}
-            size={rem(48)}
+            fz={{base: rem(28), md: rem(48)}}
             c="black"
           >
             Book unikke oplevelser og skønhedsoplevelse
@@ -231,10 +227,10 @@ function RecommendedTreatments({
         <Suspense
           fallback={
             <Flex gap="lg">
-              <Skeleton height={50} />
-              <Skeleton height={50} />
-              <Skeleton height={50} />
-              <Skeleton height={50} />
+              {[...Array(4)].map((_, index) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <Skeleton key={index} height={50} />
+              ))}
             </Flex>
           }
         >
@@ -243,18 +239,18 @@ function RecommendedTreatments({
               <Suspense
                 fallback={
                   <Flex gap="lg">
-                    <Skeleton height={50} />
-                    <Skeleton height={50} />
-                    <Skeleton height={50} />
-                    <Skeleton height={50} />
+                    {[...Array(4)].map((_, index) => (
+                      // eslint-disable-next-line react/no-array-index-key
+                      <Skeleton key={index} height={50} />
+                    ))}
                   </Flex>
                 }
               >
                 <Await resolve={products}>
                   {({products}) => (
                     <Slider
                       plugins={[AUTOPLAY_DELAY.current]}
-                      slideSize={{base: '50%', md: '20%'}}
+                      slideSize={{base: '100%', md: '20%'}}
                     >
                       {products.nodes.map((product) => {
                         const productUsers = productsUsers.find(