Silly skeleton for NpmDiff

src/app/[...parts]/_page/NpmDiff/DiffFiles/DiffFile/DiffFile.skeleton.tsx

@@ -0,0 +1,54 @@
+import { Box, Skeleton } from "@chakra-ui/react";
+import CollapsableBorderBox from "^/components/CollapsableBorderBox";
+import contentVisibility from "^/lib/utils/contentVisibility";
+import { DiffFileHeaderSkeleton } from "./DiffFileHeader";
+import { Decoration } from "./react-diff-view";
+
+const FakeCodeRow = ({
+    length,
+    indent,
+}: {
+    length: number;
+    indent: number;
+}) => (
+    <Skeleton
+        marginTop="1em"
+        marginLeft={indent * 2 + "em"}
+        marginBottom="1em"
+        height="0.5em"
+        width={length + "em"}
+    />
+);
+
+export default function DiffFileSkeleton() {
+    return (
+        <CollapsableBorderBox
+            css={{
+                label: "DiffFile",
+                margin: "1em 0",
+                fontsize: "16px",
+                ...contentVisibility("700px"),
+            }}
+            header={<DiffFileHeaderSkeleton />}
+        >
+            <Box
+                borderWidth="1px 0"
+                background="gray.700"
+                padding="10px"
+                lineHeight={1.6}
+                fontSize="16px"
+            >
+                <Skeleton height="0.5em" margin="0.5em 0" width="10em" />
+            </Box>
+            <Box paddingLeft="3em">
+                <FakeCodeRow length={8} indent={0} />
+                <FakeCodeRow length={14} indent={0} />
+                <FakeCodeRow length={10} indent={0} />
+                <FakeCodeRow length={4} indent={1} />
+                <FakeCodeRow length={8} indent={2} />
+                <FakeCodeRow length={2} indent={1} />
+                <FakeCodeRow length={4} indent={0} />
+            </Box>
+        </CollapsableBorderBox>
+    );
+}

src/app/[...parts]/_page/NpmDiff/DiffFiles/DiffFile/DiffFile.tsx

@@ -16,7 +16,7 @@ import { Diff } from "./react-diff-view";
 const FILES_TO_RENDER = 2 ** 6;
 const CHANGES_TO_RENDER = 2 ** 7;
 
-interface DiffFileProps extends CollapsableBorderBoxProps {
+export interface DiffFileProps extends CollapsableBorderBoxProps {
     a: SimplePackageSpec;
     b: SimplePackageSpec;
     file: FileData;

src/app/[...parts]/_page/NpmDiff/DiffFiles/DiffFile/DiffFileHeader.tsx

@@ -3,11 +3,13 @@ import {
     Code,
     Heading,
     HStack,
+    Skeleton,
     StackProps,
-    Text,
+    VStack,
 } from "@chakra-ui/react";
 import { FunctionComponent } from "react";
 import type { FileData } from "react-diff-view";
+import Span from "^/components/Span";
 import Tooltip from "^/components/Tooltip";
 import { unpkg } from "^/lib/Services";
 import SimplePackageSpec from "^/lib/SimplePackageSpec";
@@ -37,14 +39,14 @@ const DiffFileHeader: FunctionComponent<DiffFileHeaderProps> = ({
                     additions + deletions
                 } changes: ${additions} additions & ${deletions} deletions`}
             >
-                <Text as="span">
-                    <Text as="span" color="green.200" padding="0 4px">
+                <Span>
+                    <Span color="green.200" padding="0 4px">
                         +++{additions}
-                    </Text>
-                    <Text as="span" color="red.200" padding="0 4px">
+                    </Span>
+                    <Span color="red.200" padding="0 4px">
                         ---{deletions}
-                    </Text>
-                </Text>
+                    </Span>
+                </Span>
             </Tooltip>
         </Heading>
         <Tooltip
@@ -75,3 +77,28 @@ const DiffFileHeader: FunctionComponent<DiffFileHeaderProps> = ({
 );
 
 export default DiffFileHeader;
+
+export function DiffFileHeaderSkeleton() {
+    return (
+        <HStack justifyContent="space-between" width="100%">
+            <Heading size="sm" as={HStack}>
+                <Skeleton width={170} height="0.5rem" />
+                <Span>
+                    <Span opacity={0.5} padding="0 4px">
+                        +++0
+                    </Span>
+                    <Span opacity={0.5} padding="0 4px">
+                        ---0
+                    </Span>
+                </Span>
+            </Heading>
+            <Button
+                size="sm"
+                variant="ghost"
+                rightIcon={<ServiceIcon service={unpkg} />}
+            >
+                View file
+            </Button>
+        </HStack>
+    );
+}

src/app/[...parts]/_page/NpmDiff/DiffFiles/DiffFile/index.ts

@@ -1,3 +1,5 @@
-import DiffFile from "./DiffFile";
+import DiffFile, { DiffFileProps } from "./DiffFile";
+import DiffFileSkeleton from "./DiffFile.skeleton";
 
 export default DiffFile;
+export { type DiffFileProps, DiffFileSkeleton };

src/app/[...parts]/_page/NpmDiff/DiffFiles/DiffFiles.skeleton.tsx

@@ -0,0 +1,10 @@
+import { Box } from "@chakra-ui/react";
+import { DiffFileSkeleton } from "./DiffFile";
+
+export default function DiffFilesSkeleton() {
+    return (
+        <Box css={{ label: "DiffFiles", contain: "content", minWidth: "100%" }}>
+            <DiffFileSkeleton />
+        </Box>
+    );
+}

src/app/[...parts]/_page/NpmDiff/DiffFiles/index.ts

@@ -1,4 +1,5 @@
 import DiffFiles, { DiffFilesProps } from "./DiffFiles";
+import DiffFilesSkeleton from "./DiffFiles.skeleton";
 
-export type { DiffFilesProps };
+export { type DiffFilesProps, DiffFilesSkeleton };
 export default DiffFiles;

src/app/[...parts]/_page/NpmDiff/NpmDiff.skeleton.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import {
+    Box,
+    BoxProps,
+    HStack,
+    Skeleton,
+    useBreakpointValue,
+} from "@chakra-ui/react";
+import { useSearchParams } from "next/navigation";
+import { Suspense } from "react";
+import { ViewType } from "react-diff-view";
+import { DIFF_TYPE_PARAM_NAME } from "../paramNames";
+import { DiffFilesSkeleton } from "./DiffFiles";
+import ViewTypeSwitch from "./ViewTypeSwitch";
+
+export interface NpmDiffSkeletonProps extends BoxProps {}
+
+const NpmDiffSkeleton = (props: NpmDiffSkeletonProps) => {
+    const searchParams = useSearchParams();
+    // Even if the initial value and the first breakpoint value is the same,
+    // the component will re-render. This means it will _always_ render twice
+    // even when it shouldn't have to.
+    // We work around this by memoizing the rendering of the component.
+    const defaultViewType = useBreakpointValue<ViewType>(
+        {
+            base: "unified",
+            lg: "split",
+        },
+        // We assume that most users are on a computer so default to "lg".
+        // We could use something like https://github.com/kaimallea/isMobile
+        // but that means cache should be different for desktop/mobile
+        "lg",
+    )!;
+
+    const viewType =
+        // If specified in URL, use that
+        (searchParams?.get(DIFF_TYPE_PARAM_NAME) === "split" && "split") ||
+        (searchParams?.get(DIFF_TYPE_PARAM_NAME) === "unified" && "unified") ||
+        // If not, use default based on screen size
+        defaultViewType;
+
+    return (
+        <Box {...props}>
+            <HStack width="100%" justifyContent="space-between" {...props}>
+                <Skeleton width={400} height="0.5rem" />
+                <Suspense>
+                    <ViewTypeSwitch currentViewType={viewType} />
+                </Suspense>
+            </HStack>
+            <DiffFilesSkeleton />
+        </Box>
+    );
+};
+
+export default NpmDiffSkeleton;

src/app/[...parts]/_page/NpmDiff/NpmDiff.tsx

@@ -1,3 +1,5 @@
+"use server";
+
 import parser from "gitdiff-parser";
 import type { Options } from "libnpmdiff";
 import { Suspense } from "react";
@@ -8,6 +10,7 @@ import SimplePackageSpec from "^/lib/SimplePackageSpec";
 import countChanges from "^/lib/utils/countChanges";
 import NoDiff from "./NoDiff";
 import NpmDiffClient from "./NpmDiff.client";
+import NpmDiffSkeleton from "./NpmDiff.skeleton";
 
 export interface NpmDiffProps {
     a: SimplePackageSpec;

src/app/[...parts]/page.tsx

@@ -13,6 +13,7 @@ import BundlephobiaDiff, {
 } from "./_page/BundlephobiaDiff";
 import DiffIntro from "./_page/DiffIntro";
 import NpmDiff from "./_page/NpmDiff/NpmDiff";
+import NpmDiffSkeleton from "./_page/NpmDiff/NpmDiff.skeleton";
 import PackagephobiaDiff, {
     PackagephobiaDiffSkeleton,
 } from "./_page/PackagephobiaDiff";
@@ -98,7 +99,7 @@ const DiffPage = async ({
                     }
                     options={options}
                 />
-                <Suspense fallback={<div style={{ flex: "1" }} />}>
+                <Suspense fallback={<NpmDiffSkeleton flex="1" />}>
                     {/* @ts-expect-error Server Component */}
                     <NpmDiff
                         a={a}