zudoku 0.1.1-dev.43 → 0.1.1-dev.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.1.1-dev.43",
+  "version": "0.1.1-dev.44",
   "type": "module",
   "files": [
     "dist",

package/src/lib/components/Layout.tsx

@@ -7,7 +7,7 @@ import { Header } from "./Header.js";
 import { useDevPortal } from "./context/DevPortalProvider.js";
 import { useViewportAnchor } from "./context/ViewportAnchorContext.js";
 import { SideNavigation } from "./navigation/SideNavigation.js";
-import { SideNavigationWrapper } from "./navigation/SideNavigationWrapper.js";
+import { Spinner } from "./Spinner.js";
 
 export const Layout = ({ children }: { children?: ReactNode }) => {
   const location = useLocation();
@@ -42,8 +42,14 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       </Helmet>
       <Header />
 
-      <div className="max-w-screen-2xl mx-auto pt-[--header-height] px-10 lg:px-12">
-        <Suspense fallback={<div />}>
+      <div className="max-w-screen-2xl mx-auto pt-[--header-height] px-10 lg:px-12 h-full">
+        <Suspense
+          fallback={
+            <div className="grid h-full place-items-center">
+              <Spinner />
+            </div>
+          }
+        >
           <SideNavigation />
           <main
             className="dark:border-white/10 translate-x-0

package/src/lib/components/Spinner.tsx

@@ -0,0 +1,5 @@
+import { LoaderCircle } from "lucide-react";
+
+export const Spinner = ({ size = 16 }: { size?: number }) => (
+  <LoaderCircle size={size} className="animate-spin" />
+);

package/src/lib/components/navigation/SideNavigation.tsx

@@ -11,7 +11,7 @@ export const SideNavigation = () => {
   return (
     <SideNavigationWrapper
       ref={navRef}
-      data={navigation.data.items.length > 0 ? "true" : "false"}
+      pushMainContent={navigation.data.items.length > 0}
     >
       {navigation.data.items.map((category) => (
         <SideNavigationCategory key={category.label} category={category} />

package/src/lib/components/navigation/SideNavigationWrapper.tsx

@@ -3,10 +3,14 @@ import { cn } from "../../util/cn.js";
 
 export const SideNavigationWrapper = forwardRef<
   HTMLDivElement,
-  PropsWithChildren<{ data?: string; className?: string }>
->(({ children, className, data }, ref) => (
+  PropsWithChildren<{ pushMainContent?: boolean; className?: string }>
+>(({ children, className, pushMainContent }, ref) => (
   <nav
-    data-navigation={data}
+    // this data attribute is used in `Layout.tsx` to determine if side navigation
+    // is present for the current page so the main content is pushed to the right
+    // it's also important to set `peer` class here.
+    // maybe this could be simplified by adjusting the layout
+    data-navigation={String(pushMainContent)}
     className={cn(
       "peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0 p-[--padding-nav-item] -mx-[--padding-nav-item] pb-20 pt-[--padding-content-top] w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
       className,

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

@@ -72,12 +72,15 @@ const AllOperationsQuery = graphql(/* GraphQL */ `
   }
 `);
 
+const suspenseContext = { suspense: true };
+
 export const OperationList = () => {
   const { type, input } = useOasConfig();
 
   const [result] = useQuery({
     query: AllOperationsQuery,
     variables: { type, input },
+    context: suspenseContext,
   });
 
   if (!result.data) return null;

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

@@ -21,6 +21,7 @@ import { CirclePlayIcon, LoaderCircle, MonitorCheckIcon } from "lucide-react";
 import { createUrl } from "./createUrl.js";
 import { UrlDisplay } from "./UrlDisplay.js";
 import { useApiIdentities } from "../../../components/context/DevPortalProvider.js";
+import { Spinner } from "../../../components/Spinner.js";
 
 function mimeTypeToLanguage(mimeType: string) {
   const mimeTypeMapping = {
@@ -305,7 +306,7 @@ const Playground = ({
                   <div className="grid place-items-center h-full">
                     <span className="text-[16px] font-semibold text-muted-foreground">
                       {queryMutation.isPending ? (
-                        <LoaderCircle size={18} className="animate-spin" />
+                        <Spinner />
                       ) : (
                         "Send a request first to see the response here"
                       )}