fix(website): CAN-584

packages/website/src/features/Docs/DocsCannonfilesPage.tsx

@@ -214,19 +214,23 @@ const CustomTable: React.FC<{
   </Box>
 );
 
-export const DocsCannonfilesPage: FC = () => {
+const DocsCannonfilesPage: FC = () => {
   const isSmall = useBreakpointValue({
     base: true,
     sm: true,
     md: false,
   });
 
-  const cannonfileSpecs = useCannonfileSpecs();
+  const { isLoading, data: cannonfileSpecs, error } = useCannonfileSpecs();
 
-  if (!cannonfileSpecs) {
+  if (isLoading) {
     return <CustomSpinner m="auto" />;
   }
 
+  if (!cannonfileSpecs) {
+    return <Text>Error: {error?.message}</Text>;
+  }
+
   return (
     <Flex flex="1" direction="column" maxHeight="100%" maxWidth="100%">
       <Flex flex="1" direction={['column', 'column', 'row']}>
@@ -789,3 +793,5 @@ export const DocsCannonfilesPage: FC = () => {
     </Flex>
   );
 };
+
+export default DocsCannonfilesPage;

packages/website/src/features/Docs/DocsCliPage.tsx

@@ -29,29 +29,15 @@ import {
   Tr,
   useBreakpointValue,
 } from '@chakra-ui/react';
-import commandsConfig from '@usecannon/cli/dist/src/commands/config';
 import React, { FC } from 'react';
 import { FaYarn } from 'react-icons/fa';
 import { ImNpm } from 'react-icons/im';
 import { SiPnpm } from 'react-icons/si';
+import { useCommandsConfig } from '@/hooks/useCommandsConfig';
+import { CustomSpinner } from '@/components/CustomSpinner';
 
 const basicCommands = ['run', 'build', 'verify', 'publish'];
 
-const commandsData: any[] = [];
-
-const collectCommandsData = (config: any, parentName?: string) => {
-  Object.entries(config).forEach(([k, v]) => {
-    const name = parentName ? `${parentName} ${k}` : k;
-    if ((v as any).commands) {
-      collectCommandsData((v as any).commands, name);
-    } else {
-      commandsData.push({ ...(v as any), name });
-    }
-  });
-};
-
-collectCommandsData(commandsConfig);
-
 interface CustomLinkProps {
   href: string;
   children: React.ReactNode;
@@ -319,13 +305,23 @@ const renderCommandConfig = (commandConfig: any) => {
   );
 };
 
-export const DocsCliPage: FC = () => {
+const DocsCliPage: FC = () => {
+  const { commandsData, isLoading, error } = useCommandsConfig();
+
   const isSmall = useBreakpointValue({
     base: true,
     sm: true,
     md: false,
   });
 
+  if (isLoading) {
+    return <CustomSpinner m="auto" />;
+  }
+
+  if (error) {
+    return <Box>Error: {error.message}</Box>;
+  }
+
   return (
     <Flex flex="1" direction="column" maxHeight="100%" maxWidth="100%">
       <Flex flex="1" direction={['column', 'column', 'row']}>
@@ -504,3 +500,5 @@ export const DocsCliPage: FC = () => {
     </Flex>
   );
 };
+
+export default DocsCliPage;

packages/website/src/features/Docs/DocsLandingPage.tsx

@@ -43,7 +43,7 @@ const linkStyle = {
   _hover: { borderBottomColor: 'gray.400' },
 };
 
-export const DocsLandingPage = () => {
+const DocsLandingPage = () => {
   const isLargeScreen = useBreakpointValue({ base: false, md: true });
 
   return (
@@ -304,3 +304,5 @@ export const DocsLandingPage = () => {
     </Flex>
   );
 };
+
+export default DocsLandingPage;

packages/website/src/hooks/cannonfileSpecs.ts

@@ -1,7 +1,7 @@
 import { chainDefinitionSchema } from '@usecannon/builder/dist/src/schemas';
 import { runSchema } from '@usecannon/cli/dist/src/schemas';
 import { compile } from 'json-schema-to-typescript';
-import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { zodToJsonSchema } from 'zod-to-json-schema';
 
 interface CannonfileSpec {
@@ -59,74 +59,71 @@ const getJsonSchemaPropType = async (prop: any) => {
   return result.replace('export interface Type ', '').replace('export type Type = ', '');
 };
 
-export function useCannonfileSpecs() {
-  const [cannonfileSpecs, setCannonfileSpecs] = useState<Map<string, CannonfileSpec>>();
+async function fetchCannonfileSpecs() {
+  const chainDefinitionJsonSchema = zodToJsonSchema(chainDefinitionSchema, {
+    $refStrategy: 'none',
+  });
 
-  useEffect(() => {
-    const fetchCannonfileSpecs = async () => {
-      const chainDefinitionJsonSchema = zodToJsonSchema(chainDefinitionSchema, {
-        $refStrategy: 'none',
-      });
+  const runJsonSchema = zodToJsonSchema(runSchema, {
+    $refStrategy: 'none',
+  });
 
-      const runJsonSchema = zodToJsonSchema(runSchema, {
-        $refStrategy: 'none',
-      });
+  const result = new Map<string, CannonfileSpec>();
 
-      const result = new Map<string, CannonfileSpec>();
+  const metadataKeys = ['name', 'preset', 'version', 'description', 'keywords', 'privateSourceCode'];
+  const metadataSpecs: Spec[] = [];
+  for (const key of metadataKeys) {
+    metadataSpecs.push(await getSpec(chainDefinitionJsonSchema, key));
+  }
+  result.set('metadata', {
+    description: 'Provide metadata for your Cannonfile.',
+    specs: metadataSpecs,
+  });
 
-      const metadataKeys = ['name', 'preset', 'version', 'description', 'keywords', 'privateSourceCode'];
-      const metadataSpecs: Spec[] = [];
-      for (const key of metadataKeys) {
-        metadataSpecs.push(await getSpec(chainDefinitionJsonSchema, key));
-      }
-      result.set('metadata', {
-        description: 'Provide metadata for your Cannonfile.',
-        specs: metadataSpecs,
-      });
-
-      for (const stepName in (chainDefinitionJsonSchema as any).properties) {
-        if (metadataKeys.includes(stepName)) {
-          continue;
-        }
-
-        const stepSpecs: Spec[] = [];
-        const stepJsonSchema = (chainDefinitionJsonSchema as any).properties[stepName].additionalProperties;
-
-        for (const key in stepJsonSchema?.properties) {
-          stepSpecs.push(await getSpec(stepJsonSchema, key));
-        }
-        result.set(stepName, {
-          description: (chainDefinitionJsonSchema as any).properties[stepName].description,
-          specs: stepSpecs,
-        });
-      }
+  for (const stepName in (chainDefinitionJsonSchema as any).properties) {
+    if (metadataKeys.includes(stepName)) {
+      continue;
+    }
+
+    const stepSpecs: Spec[] = [];
+    const stepJsonSchema = (chainDefinitionJsonSchema as any).properties[stepName].additionalProperties;
+
+    for (const key in stepJsonSchema?.properties) {
+      stepSpecs.push(await getSpec(stepJsonSchema, key));
+    }
+    result.set(stepName, {
+      description: (chainDefinitionJsonSchema as any).properties[stepName].description,
+      specs: stepSpecs,
+    });
+  }
 
-      const runSpecs: Spec[] = [];
-      for (const key in (runJsonSchema as any).properties) {
-        runSpecs.push(await getSpec(runJsonSchema, key));
-      }
-      result.set('run', {
-        description:
-          '⚠ This operation breaks composability—only use this as a last resort. (Instead, you should use a custom Cannon plug-in if this is necessary for your deployment.) Execute a custom script. This script is passed a ChainBuilder object as parameter.',
-        specs: runSpecs,
-      });
-
-      const deprecatedKeys = ['setting', 'provision', 'import', 'contract'];
-      for (const key of deprecatedKeys) {
-        if (result.has(key)) {
-          const step = result.get(key);
-          if (step) {
-            step.deprecated = true;
-            result.set(key, step);
-          }
-        }
-      }
+  const runSpecs: Spec[] = [];
+  for (const key in (runJsonSchema as any).properties) {
+    runSpecs.push(await getSpec(runJsonSchema, key));
+  }
+  result.set('run', {
+    description:
+      '⚠ This operation breaks composability—only use this as a last resort. (Instead, you should use a custom Cannon plug-in if this is necessary for your deployment.) Execute a custom script. This script is passed a ChainBuilder object as parameter.',
+    specs: runSpecs,
+  });
 
-      setCannonfileSpecs(result);
-    };
+  const deprecatedKeys = ['setting', 'provision', 'import', 'contract'];
+  for (const key of deprecatedKeys) {
+    if (result.has(key)) {
+      const step = result.get(key);
+      if (step) {
+        step.deprecated = true;
+        result.set(key, step);
+      }
+    }
+  }
 
-    void fetchCannonfileSpecs();
-  }, []);
+  return result;
+}
 
-  return cannonfileSpecs;
+export function useCannonfileSpecs() {
+  return useQuery({
+    queryKey: ['cannonfileSpecs'],
+    queryFn: fetchCannonfileSpecs,
+  });
 }

packages/website/src/hooks/useCommandsConfig.ts

@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+
+interface CommandData {
+  name: string;
+  [key: string]: any;
+}
+
+const collectCommandsData = (config: any, parentName?: string): CommandData[] => {
+  const data: CommandData[] = [];
+  Object.entries(config).forEach(([k, v]) => {
+    const name = parentName ? `${parentName} ${k}` : k;
+    if ((v as any).commands) {
+      data.push(...collectCommandsData((v as any).commands, name));
+    } else {
+      data.push({ ...(v as any), name });
+    }
+  });
+  return data;
+};
+
+export const useCommandsConfig = () => {
+  const [commandsData, setCommandsData] = useState<CommandData[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const loadCommandsConfig = async () => {
+      try {
+        const { default: commandsConfig } = await import('@usecannon/cli/dist/src/commands/config');
+
+        const newCommandsData = collectCommandsData(commandsConfig);
+        setCommandsData(newCommandsData);
+        setIsLoading(false);
+      } catch (err) {
+        setError(err as Error);
+        setIsLoading(false);
+      }
+    };
+
+    void loadCommandsConfig();
+  }, []);
+
+  return { commandsData, isLoading, error };
+};

packages/website/src/pages/learn/cannonfile/index.tsx

@@ -1,8 +1,16 @@
-import { DocsCannonfilesPage } from '@/features/Docs/DocsCannonfilesPage';
-import { ReactElement } from 'react';
+import { ReactElement, Suspense } from 'react';
+import dynamic from 'next/dynamic';
 import Layout from '../_layout';
 import { NextSeo } from 'next-seo';
 import defaultSEO from '@/constants/defaultSeo';
+import PageLoading from '@/components/PageLoading';
+
+const DynamicDocsCannonfilesPage = dynamic(
+  () => import('@/features/Docs/DocsCannonfilesPage'),
+  {
+    ssr: false,
+  }
+);
 
 export default function Docs() {
   return (
@@ -17,10 +25,13 @@ export default function Docs() {
           description: 'Cannonfile Docs',
         }}
       />
-      <DocsCannonfilesPage />
+      <Suspense fallback={<PageLoading />}>
+        <DynamicDocsCannonfilesPage />
+      </Suspense>
     </>
   );
 }
+
 Docs.getLayout = function getLayout(page: ReactElement) {
   return <Layout>{page}</Layout>;
 };

packages/website/src/pages/learn/cli/index.tsx

@@ -1,8 +1,14 @@
-import { DocsCliPage } from '@/features/Docs/DocsCliPage';
-import { ReactElement } from 'react';
+import { ReactElement, Suspense } from 'react';
+import dynamic from 'next/dynamic';
 import Layout from '../_layout';
 import { NextSeo } from 'next-seo';
 import defaultSEO from '@/constants/defaultSeo';
+import PageLoading from '@/components/PageLoading';
+
+// Dynamic import of DocsCliPage
+const DocsCliPage = dynamic(() => import('@/features/Docs/DocsCliPage'), {
+  ssr: false,
+});
 
 export default function Docs() {
   return (
@@ -17,10 +23,13 @@ export default function Docs() {
           description: 'CLI Docs',
         }}
       />
-      <DocsCliPage />
+      <Suspense fallback={<PageLoading />}>
+        <DocsCliPage />
+      </Suspense>
     </>
   );
 }
+
 Docs.getLayout = function getLayout(page: ReactElement) {
   return <Layout>{page}</Layout>;
 };

packages/website/src/pages/learn/guides/build/index.tsx

@@ -1,7 +1,7 @@
 import { BuildPage } from '@/features/GetStarted/BuildPage';
 import { ReactElement } from 'react';
 import Layout from '../../_layout';
-import NestedLayout from '../_layout';
+import NestedLayout from '../guideLayout';
 import { NextSeo } from 'next-seo';
 import defaultSEO from '@/constants/defaultSeo';
 

packages/website/src/pages/learn/guides/debug/index.tsx

@@ -1,7 +1,7 @@
 import { DebugPage } from '@/features/Debug/DebugPage';
 import { ReactElement } from 'react';
 import Layout from '../../_layout';
-import NestedLayout from '../_layout';
+import NestedLayout from '../guideLayout';
 import { NextSeo } from 'next-seo';
 import defaultSEO from '@/constants/defaultSeo';
 

packages/website/src/pages/learn/guides/get-started/index.tsx

@@ -1,7 +1,7 @@
 import { GetStartedPage } from '@/features/GetStarted/GetStartedPage';
 import { ReactElement } from 'react';
 import Layout from '../../_layout';
-import NestedLayout from '../_layout';
+import NestedLayout from '../guideLayout';
 import { NextSeo } from 'next-seo';
 import defaultSEO from '@/constants/defaultSeo';