Use suspense() helper even more!

oBusk · Mar 9, 2024 · eea9dc0 · eea9dc0
1 parent 647eaee
commit eea9dc0
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 30 deletions.
diff --git a/src/app/[...parts]/_page/DiffIntro/SpecBox.tsx b/src/app/[...parts]/_page/DiffIntro/SpecBox.tsx
@@ -2,6 +2,7 @@ import { forwardRef, type HTMLAttributes } from "react";
 import Pkg from "^/components/ui/Pkg";
 import { cx } from "^/lib/cva";
 import type SimplePackageSpec from "^/lib/SimplePackageSpec";
+import { simplePackageSpecToString } from "^/lib/SimplePackageSpec";
 import PublishDate from "./PublishDate";
 import ServiceLinks from "./ServiceLinks";
 
@@ -14,7 +15,11 @@ const SpecBox = forwardRef<HTMLElement, SpecBoxProps>(
     ({ pkg, pkgClassName, ...props }, ref) => (
         <section {...props} ref={ref}>
             <Pkg pkg={pkg} className={cx("px-1", pkgClassName)} />
-            <PublishDate pkg={pkg} className="font-normal" />
+            <PublishDate
+                key={"publishdate-" + simplePackageSpecToString(pkg)}
+                pkg={pkg}
+                className="font-normal"
+            />
             <ServiceLinks pkg={pkg} />
         </section>
     ),

diff --git a/src/app/[...parts]/_page/NpmDiff/NpmDiff.skeleton.tsx b/src/app/[...parts]/_page/NpmDiff/NpmDiff.skeleton.tsx
@@ -1,26 +1,20 @@
-import { type ComponentProps, forwardRef, Suspense } from "react";
+import { forwardRef, Suspense } from "react";
 import Skeleton from "^/components/ui/Skeleton";
 import Stack from "^/components/ui/Stack";
 import { DiffFilesSkeleton } from "./DiffFiles";
+import { type NpmDiffProps } from "./NpmDiff";
 import ViewTypeSwitch from "./ViewTypeSwitch";
 
-export interface NpmDiffSkeletonProps extends ComponentProps<"div"> {}
-
-const NpmDiffSkeleton = forwardRef<HTMLDivElement, NpmDiffSkeletonProps>(
-    (props, ref) => (
-        <div {...props} ref={ref}>
-            <Stack
-                direction="h"
-                className="w-full items-center justify-between"
-            >
-                <Skeleton className="mt-1 h-2 w-64" />
-                <Suspense>
-                    <ViewTypeSwitch />
-                </Suspense>
-            </Stack>
-            <DiffFilesSkeleton />
-        </div>
-    ),
+const NpmDiffSkeleton = () => (
+    <div>
+        <Stack direction="h" className="w-full items-center justify-between">
+            <Skeleton className="mt-1 h-2 w-64" />
+            <Suspense>
+                <ViewTypeSwitch />
+            </Suspense>
+        </Stack>
+        <DiffFilesSkeleton />
+    </div>
 );
 NpmDiffSkeleton.displayName = "NpmDiffSkeleton";
 

diff --git a/src/app/[...parts]/_page/NpmDiff/index.tsx b/src/app/[...parts]/_page/NpmDiff/index.tsx
@@ -0,0 +1,7 @@
+import suspense from "^/lib/suspense";
+import NpmDiff from "./NpmDiff";
+import NpmDiffSkeleton from "./NpmDiff.skeleton";
+
+const SuspendedNpmDiff = suspense(NpmDiff, NpmDiffSkeleton);
+
+export default SuspendedNpmDiff;
diff --git a/src/app/[...parts]/page.tsx b/src/app/[...parts]/page.tsx
@@ -11,7 +11,7 @@ import specsToDiff from "^/lib/utils/specsToDiff";
 import splitParts from "^/lib/utils/splitParts";
 import BundlephobiaDiff from "./_page/BundlephobiaDiff";
 import DiffIntro from "./_page/DiffIntro";
-import NpmDiff from "./_page/NpmDiff/NpmDiff";
+import NpmDiff from "./_page/NpmDiff";
 import NpmDiffSkeleton from "./_page/NpmDiff/NpmDiff.skeleton";
 import PackagephobiaDiff from "./_page/PackagephobiaDiff";
 import { type DIFF_TYPE_PARAM_NAME } from "./_page/paramNames";
@@ -92,17 +92,13 @@ const DiffPage = async ({
                     }
                     options={options}
                 />
-                <Suspense
-                    fallback={<NpmDiffSkeleton className="flex-1" />}
+                <NpmDiff
+                    a={a}
+                    b={b}
+                    specs={canonicalSpecs}
+                    options={options}
                     key={JSON.stringify([canonicalSpecs, options])}
-                >
-                    <NpmDiff
-                        a={a}
-                        b={b}
-                        specs={canonicalSpecs}
-                        options={options}
-                    />
-                </Suspense>
+                />
             </>
         );
     }