zudoku 0.3.0-dev.55 → 0.3.0-dev.57

package/src/lib/plugins/openapi/OperationList.tsx

@@ -1,13 +1,14 @@
 import { ResultOf } from "@graphql-typed-document-node/core";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
+import { DeveloperHint } from "../../components/DeveloperHint.js";
 import { ErrorPage } from "../../components/ErrorPage.js";
 import { Heading } from "../../components/Heading.js";
 import { InlineCode } from "../../components/InlineCode.js";
 import { Markdown } from "../../components/Markdown.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
-import { Callout } from "../../ui/Callout.js";
 import { cn } from "../../util/cn.js";
 import { OperationListItem } from "./OperationListItem.js";
+import StaggeredRender from "./StaggeredRender.js";
 import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/index.js";
 import { SchemaProseClasses } from "./util/prose.js";
@@ -106,13 +107,10 @@ export const OperationList = () => {
         title="Schema cannot be displayed"
         message={
           <>
-            {import.meta.env.DEV && (
-              <Callout type="danger" title="Developer hint" className="mb-4">
-                Check your configuration value{" "}
-                <InlineCode>apis.type</InlineCode> and{" "}
-                <InlineCode>apis.input</InlineCode> in the Zudoku config.
-              </Callout>
-            )}
+            <DeveloperHint className="mb-4">
+              Check your configuration value <InlineCode>apis.type</InlineCode>{" "}
+              and <InlineCode>apis.input</InlineCode> in the Zudoku config.
+            </DeveloperHint>
             An error occurred while trying to fetch the API reference:
             <SyntaxHighlight code={error.toString()} language="plain" />
           </>
@@ -149,12 +147,14 @@ export const OperationList = () => {
               />
             )}
             <div className="operation mb-12">
-              {tag.operations.map((fragment) => (
-                <OperationListItem
-                  key={fragment.slug}
-                  operationFragment={fragment}
-                />
-              ))}
+              <StaggeredRender>
+                {tag.operations.map((fragment) => (
+                  <OperationListItem
+                    key={fragment.slug}
+                    operationFragment={fragment}
+                  />
+                ))}
+              </StaggeredRender>
             </div>
           </div>
         ))}

package/src/lib/plugins/openapi/StaggeredRender.tsx

@@ -0,0 +1,17 @@
+import { Children, ReactNode, useEffect, useState } from "react";
+
+const StaggeredRender = ({ children }: { children: ReactNode[] }) => {
+  const [isMounted, setIsMounted] = useState(typeof window === "undefined");
+
+  useEffect(() => {
+    const x = window.requestIdleCallback(() => {
+      setIsMounted(true);
+    });
+
+    return () => window.cancelIdleCallback(x);
+  }, []);
+
+  return !isMounted ? Children.toArray(children).slice(0, 3) : children;
+};
+
+export default StaggeredRender;

package/src/lib/plugins/openapi/playground/PlaygroundDialog.tsx

@@ -1,15 +1,13 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { CirclePlayIcon } from "lucide-react";
-import { lazy, Suspense, useState } from "react";
+import { useState } from "react";
 import {
   Dialog,
   DialogContent,
   DialogTitle,
   DialogTrigger,
 } from "../../../components/Dialog.js";
-import { type PlaygroundContentProps } from "./Playground.js";
-
-const Playground = lazy(() => import("./Playground.js"));
+import { Playground, type PlaygroundContentProps } from "./Playground.js";
 
 const PlaygroundDialog = (props: PlaygroundContentProps) => {
   const [open, setOpen] = useState(false);
@@ -29,7 +27,7 @@ const PlaygroundDialog = (props: PlaygroundContentProps) => {
         <VisuallyHidden>
           <DialogTitle>Playground</DialogTitle>
         </VisuallyHidden>
-        <Suspense>{open && <Playground {...props} />}</Suspense>
+        {open && <Playground {...props} />}
       </DialogContent>
     </Dialog>
   );