fix: AvatarGroup to Image for load optimizations

SocialGouv · Nov 15, 2024 · c41fbfa · c41fbfa
1 parent e470545
commit c41fbfa
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 15 deletions.
diff --git a/webapp/CHANGELOG.md b/webapp/CHANGELOG.md
@@ -1,16 +1,14 @@
 ## [0.63.14](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.63.13...v0.63.14) (2024-11-15)
 
-
 ### Bug Fixes
 
-* wait 5sc before reseting offer state after payment link ([81b18e8](https://github.com/SocialGouv/carte-jeune-engage/commit/81b18e8998212598e49c192b20b8b83d6f6aa388))
+- wait 5sc before reseting offer state after payment link ([81b18e8](https://github.com/SocialGouv/carte-jeune-engage/commit/81b18e8998212598e49c192b20b8b83d6f6aa388))
 
 ## [0.63.13](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.63.12...v0.63.13) (2024-11-15)
 
-
 ### Bug Fixes
 
-* return init state offer after payment redirect ([c88def7](https://github.com/SocialGouv/carte-jeune-engage/commit/c88def7526e8664c5935a8b1c8d6212a66c5001c))
+- return init state offer after payment redirect ([c88def7](https://github.com/SocialGouv/carte-jeune-engage/commit/c88def7526e8664c5935a8b1c8d6212a66c5001c))
 
 ## [0.63.12](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.63.11...v0.63.12) (2024-11-15)
 

diff --git a/webapp/src/components/lists/CategoriesList.tsx b/webapp/src/components/lists/CategoriesList.tsx
@@ -116,19 +116,38 @@ const CategoriesList = (props: CategoriesListProps) => {
           >
             {category.label}
           </Text>
-          <AvatarGroup size="md" spacing={-6} alignSelf="start">
-            {filteredOffers.map((offer) => (
-              <Avatar
+          <Flex w="full">
+            {filteredOffers.map((offer, index) => (
+              <Flex
                 key={offer.id}
-                src={offer.partner.icon.url as string}
-                name={offer.partner.icon.alt as string}
-                width="44px"
-                height="44px"
+                rounded={"full"}
+                alignItems={"center"}
+                overflow={"hidden"}
                 bg="white"
+                borderWidth={2}
                 borderColor="bgGray"
-              />
+                width={"44px"}
+                height={"44px"}
+                marginLeft={index !== 0 ? -6 : 0}
+              >
+                <Image
+                  src={offer.partner.icon.url as string}
+                  alt={offer.partner.icon.alt as string}
+                  width={44}
+                  height={44}
+                  boxStyle={{
+                    width: "100%",
+                    height: "100%",
+                  }}
+                  imageStyle={{
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                  }}
+                />
+              </Flex>
             ))}
-          </AvatarGroup>
+          </Flex>
         </Flex>
       </Link>
     );

diff --git a/webapp/src/components/ui/Image.tsx b/webapp/src/components/ui/Image.tsx
@@ -4,13 +4,14 @@ import { CSSProperties, useState } from "react";
 
 interface ImageProps extends NextImageProps {
   imageStyle?: CSSProperties;
+  boxStyle?: CSSProperties;
 }
 
 const Image = (props: ImageProps) => {
-  const { imageStyle, ...nextImageProps } = props;
+  const { imageStyle, boxStyle, ...nextImageProps } = props;
 
   return (
-    <Box>
+    <Box style={boxStyle}>
       <NextImage
         {...nextImageProps}
         placeholder="blur"