immediately display the contributors modal button to reduce lcp

Author: pettinarip

src/components/FileContributors.tsx

@@ -11,6 +11,7 @@ import {
   Skeleton as ChakraSkeleton,
   SkeletonCircle as ChakraSkeletonCircle,
   UnorderedList,
+  useBreakpointValue,
   VStack,
 } from "@chakra-ui/react"
 
@@ -87,6 +88,8 @@ const FileContributors = ({
   const [isModalOpen, setModalOpen] = useState(false)
   const { locale } = useRouter()
 
+  const isDesktop = useBreakpointValue({ base: false, md: true })
+
   if (error) return null
   const lastContributor: Author = contributors.length
     ? contributors[0]
@@ -133,49 +136,52 @@ const FileContributors = ({
         {...props}
       >
         <Flex me={4} alignItems="center" flex="1">
-          <SkeletonCircle size="10" me={4} isLoaded={!loading}>
-            <Avatar
-              height="40px"
-              width="40px"
-              src={lastContributor.avatarUrl}
-              name={lastContributor.name}
-              me={2}
-            />
-          </SkeletonCircle>
-
-          <Skeleton isLoaded={!loading}>
-            <Text m={0} color="text200">
-              <Translation id="last-edit" />:{" "}
-              {lastContributor.user?.url && (
-                <InlineLink href={lastContributor.user.url}>
-                  @{lastContributor.user.login}
-                </InlineLink>
-              )}
-              {!lastContributor.user && <span>{lastContributor.name}</span>},{" "}
-              {getLocaleTimestamp(locale as Lang, lastEdit)}
-            </Text>
-          </Skeleton>
+          {isDesktop && (
+            <>
+              <SkeletonCircle size="10" me={4} isLoaded={!loading}>
+                <Avatar
+                  height="40px"
+                  width="40px"
+                  src={lastContributor.avatarUrl}
+                  name={lastContributor.name}
+                  me={2}
+                />
+              </SkeletonCircle>
+
+              <Skeleton isLoaded={!loading}>
+                <Text m={0} color="text200">
+                  <Translation id="last-edit" />:{" "}
+                  {lastContributor.user?.url && (
+                    <InlineLink href={lastContributor.user.url}>
+                      @{lastContributor.user.login}
+                    </InlineLink>
+                  )}
+                  {!lastContributor.user && <span>{lastContributor.name}</span>}
+                  , {getLocaleTimestamp(locale as Lang, lastEdit)}
+                </Text>
+              </Skeleton>
+            </>
+          )}
         </Flex>
 
         <VStack align="stretch" justifyContent="space-between" spacing={2}>
-          <Skeleton isLoaded={!loading} mt={{ base: 4, md: 0 }}>
-            <Button
-              variant="outline"
-              bg="background.base"
-              border={0}
-              onClick={() => {
-                setModalOpen(true)
-                trackCustomEvent({
-                  eventCategory: "see contributors",
-                  eventAction: "click",
-                  eventName: "click",
-                })
-              }}
-              w={{ base: "full", md: "inherit" }}
-            >
-              <Translation id="see-contributors" />
-            </Button>
-          </Skeleton>
+          <Button
+            variant="outline"
+            bg="background.base"
+            border={0}
+            mb={{ base: 4, md: 0 }}
+            onClick={() => {
+              setModalOpen(true)
+              trackCustomEvent({
+                eventCategory: "see contributors",
+                eventAction: "click",
+                eventName: "click",
+              })
+            }}
+            w={{ base: "full", md: "inherit" }}
+          >
+            <Translation id="see-contributors" />
+          </Button>
         </VStack>
       </Flex>
     </>

src/layouts/Docs.tsx

@@ -145,7 +145,7 @@ const Content = (props: ChildOnlyProp) => {
       as={MainArticle}
       flex={`1 1 ${mdBreakpoint}`}
       w={{ base: "full", lg: "0" }}
-      pt={{ base: 32, md: 12 }}
+      pt={{ base: 8, md: 12 }}
       pb={{ base: 8, md: 16 }}
       px={{ base: 8, md: 16 }}
       m="0 auto"