feat: loading

Improve loading animations

Author: igeligel

src/components/GetStartedModule/GetStartedLink.tsx

@@ -5,6 +5,7 @@ import {
   Icon,
   Image,
   Link,
+  Skeleton,
   Text,
   VStack,
 } from "@chakra-ui/react";
@@ -23,9 +24,14 @@ type GetStartedLinkProps = {
 
 export const GetStartedLink = (props: GetStartedLinkProps) => {
   const t = useTranslations("GetStartedModule");
+  const [imageLoaded, setImageLoaded] = useState(false);
   const { href, badges, heading, imageSource, imageAlt } = props;
   const [isElementHovered, setIsElementHovered] = useState(false);
 
+  const handleImageLoad = () => {
+    setImageLoaded(true);
+  };
+
   return (
     <Link
       textDecoration={"none"}
@@ -79,23 +85,28 @@ export const GetStartedLink = (props: GetStartedLinkProps) => {
               />
             </Text>
           </VStack>
-          <Box
-            maxWidth={{ base: "100%", lg: "80%" }}
-            maxHeight={{ base: "125px", lg: "none" }}
-            overflow={{ base: "hidden", lg: "visible" }}
-          >
-            <Image
-              borderTopLeftRadius={"lg"}
-              borderTopRightRadius={"lg"}
-              boxShadow={"lg"}
-              src={imageSource}
-              alt={imageAlt}
-              transition={"transform 0.25s ease-in-out"}
-              transform={
-                isElementHovered ? "translateY(0px)" : "translateY(10px)"
-              }
-            />
-          </Box>
+          <Skeleton loading={!imageLoaded}>
+            <Box
+              maxWidth={{ base: "100%", lg: "80%" }}
+              maxHeight={{ base: "125px", lg: "none" }}
+              overflow={{ base: "hidden", lg: "visible" }}
+            >
+              <Image
+                borderTopLeftRadius={"lg"}
+                borderTopRightRadius={"lg"}
+                boxShadow={"lg"}
+                src={imageSource}
+                alt={imageAlt}
+                transition={"transform 0.25s ease-in-out"}
+                onLoad={handleImageLoad}
+                transform={
+                  isElementHovered ? "translateY(0px)" : "translateY(10px)"
+                }
+                width={"100%"}
+                height={"100%"}
+              />
+            </Box>
+          </Skeleton>
         </VStack>
       </NextLink>
     </Link>

src/pages/app/index.tsx

@@ -11,7 +11,7 @@ import {
   Heading,
   Icon,
   Portal,
-  Spinner,
+  Skeleton,
   Text,
   Textarea,
   VStack,
@@ -68,22 +68,11 @@ const AppPage = () => {
                 const { uuid, Component } = module;
 
                 return (
-                  <GridItem key={uuid} w="100%" h={"100%"}>
-                    {isLoading ? (
-                      <Box
-                        minHeight={"350px"}
-                        height={"100%"}
-                        display={"flex"}
-                        justifyContent={"center"}
-                        alignItems={"center"}
-                        maxWidth={"80%"}
-                      >
-                        <Spinner />
-                      </Box>
-                    ) : (
+                  <Skeleton loading={isLoading} key={uuid}>
+                    <GridItem w="100%" h={"100%"}>
                       <Component />
-                    )}
-                  </GridItem>
+                    </GridItem>
+                  </Skeleton>
                 );
               })}
               <GridItem w="100%">