chore: wip

Author: nhsz

src/components/Codeblock.tsx

@@ -14,7 +14,8 @@ import Emoji from "@/components/Emoji"
 ;(typeof global !== "undefined" ? global : window).Prism = Prism
 require("prismjs/components/prism-solidity")
 
-const LINES_BEFORE_COLLAPSABLE = 8
+// todo: move to constants
+export const LINES_BEFORE_COLLAPSABLE = 8
 
 const TopBarItem = (props: BoxProps) => {
   const bgColor = useColorModeValue("#f7f7f7", "#363641")

src/pages/index.tsx

@@ -15,6 +15,8 @@ import {
   HeadingProps,
   Icon,
   SimpleGridProps,
+  Skeleton,
+  SkeletonText,
   Stack,
   useToken,
 } from "@chakra-ui/react"
@@ -69,6 +71,7 @@ import infrastructurefixed from "@/public/infrastructure_transparent.png"
 import merge from "@/public/upgrades/merge.png"
 import robotfixed from "@/public/wallet-cropped.png"
 import ethereum from "@/public/what-is-ethereum.png"
+import { LINES_BEFORE_COLLAPSABLE } from "@/components/Codeblock"
 
 const SectionHeading = (props: HeadingProps) => (
   <Heading
@@ -228,6 +231,11 @@ export const getStaticProps = (async ({ locale }) => {
 // Lazy-load these components on initial load
 const Codeblock = dynamic(() => import("@/components/Codeblock"), {
   ssr: false,
+  loading: () => (
+    <Skeleton height={"100%"} startColor="body.base">
+      Loading...
+    </Skeleton>
+  ),
 })
 
 const HomePage = ({
@@ -300,6 +308,7 @@ const HomePage = ({
     },
   ]
 
+  // todo: move to interfaces
   interface CodeExample extends ITitleCardItem {
     codeLanguage: string
     code: string
@@ -550,13 +559,50 @@ const HomePage = ({
               setIsOpen={setModalOpen}
               title={codeExamples[activeCode].title}
             >
-              <Codeblock
-                codeLanguage={codeExamples[activeCode].codeLanguage}
-                allowCollapse={false}
-                fromHomepage
-              >
-                {codeExamples[activeCode].code}
-              </Codeblock>
+              <>
+                {/* <Stack
+                  px={6}
+                  py={8}
+                  maxH={`calc((1.2rem * ${LINES_BEFORE_COLLAPSABLE}) + 4.185rem)`}
+                  pt={hasTopBar ? "2.75rem" : 6}
+                  ps={4}
+                >
+                  <SkeletonText
+                    mt="4"
+                    noOfLines={12}
+                    spacing="4"
+                    skeletonHeight="2"
+                    startColor="body.base"
+                  />
+                </Stack> */}
+
+                <SkeletonText
+                  // noOfLines={13}
+                  // spacing="4"
+                  // skeletonHeight="2"
+                  px={6}
+                  py={12}
+                  overflow="hidden"
+                  startColor="body.base"
+                  h="50%"
+                >
+                  <Codeblock
+                    codeLanguage={codeExamples[activeCode].codeLanguage}
+                    allowCollapse={false}
+                    fromHomepage
+                  >
+                    {codeExamples[activeCode].code}
+                  </Codeblock>
+                </SkeletonText>
+
+                {/* <Codeblock
+                  codeLanguage={codeExamples[activeCode].codeLanguage}
+                  allowCollapse={false}
+                  fromHomepage
+                >
+                  {codeExamples[activeCode].code}
+                </Codeblock> */}
+              </>
             </CodeModal>
           )}
         </Row>