improve image loading on landing page

Author: wbglaeser

public/assets/images/landing-page/flying-kid.png

@@ -11,3 +11,13 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+/* 👇 Add this at the bottom */
+@keyframes pulse {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}

public/assets/images/landing-page/flying-kid.svg

@@ -7,7 +7,7 @@ import RegularButton from "@/ui/shared-components/RegularButton";
 
 const LandingPageMissionDesktop = ({ isDesktop }) => {
     const { t } = useTranslation();
-    const starWoman = `${process.env.PUBLIC_URL}/assets/images/landing-page/flying-kid.svg`;
+    const starWoman = `${process.env.PUBLIC_URL}/assets/images/landing-page/flying-kid.png`;
 
     return (
         <VBox sx={{

public/assets/images/landing-page/star_woman.png

@@ -8,7 +8,8 @@ import LandingPageTopSectionShared from "./components/LandingPageTopSectionShare
 const LandingPageTopSection = () => {
     const isDesktop = useStore((state) => state.isDesktop);
     const [loaded, setLoaded] = useState(false);
-    const starWoman = `${process.env.PUBLIC_URL}/assets/images/landing-page/star_woman.svg`;
+    const starWoman = `${process.env.PUBLIC_URL}/assets/images/landing-page/star_woman.png`;
+    const imageSize = isDesktop ? 523 : 328;
 
     return (
         <LandingPageSectionWrapper>
@@ -20,23 +21,56 @@ const LandingPageTopSection = () => {
                             <RegularButton variant={'yellowContained'} link='/user-routing' />
                         </VBox>
                     </VBox>
-                    <VBox sx={{ width: "50%", alignItems: "center" }}>
+                    <VBox sx={{ width: "50%", alignItems: "center", position: "relative" }}>
+                        {!loaded && (
+                            <div
+                                style={{
+                                    width: `${imageSize}px`,
+                                    height: `${imageSize}px`
+                                }}
+                            />
+                        )}
                         <img
                             src={starWoman}
                             alt="logo"
                             style={{
-                                width: "523px",
-                                height: "523px",
+                                width: `${imageSize}px`,
+                                height: `${imageSize}px`,
+                                position: loaded ? "static" : "absolute",
                                 opacity: loaded ? 1 : 0,
                                 transition: "opacity 0.8s ease-in-out",
+                                borderRadius: "12px",
                             }}
                             onLoad={() => setLoaded(true)}
                         />
                     </VBox>
                 </HBox>
             ) : (
                 <VBox sx={{ gap: "46px", alignItems: "center" }}>
-                    <img src={starWoman} alt="logo" style={{ width: "328px" }} />
+                    <VBox sx={{ alignItems: "center", position: "relative" }}>
+                        {!loaded && (
+                            <div
+                                style={{
+                                    width: `${imageSize}px`,
+                                    height: `${imageSize}px`,
+                                }}
+                            />
+                        )}
+                        <img
+                            src={starWoman}
+                            alt="logo"
+                            style={{
+                                width: `${imageSize}px`,
+                                height: `${imageSize}px`,
+                                position: loaded ? "static" : "absolute",
+                                opacity: loaded ? 1 : 0,
+                                transition: "opacity 0.8s ease-in-out",
+                                borderRadius: "12px",
+                            }}
+                            onLoad={() => setLoaded(true)}
+                        />
+                    </VBox>
+
                     <VBox sx={{ gap: "16px" }}>
                         <LandingPageTopSectionShared />
                         <RegularButton variant={'yellowContained'} link='/user-routing' />