feat(website): add granular spinners to interact section

packages/website/src/features/Packages/Abi.tsx

@@ -4,6 +4,7 @@ import {
   Box,
   Flex,
   Heading,
+  Skeleton,
   Text,
   useBreakpointValue,
 } from '@chakra-ui/react';
@@ -13,13 +14,14 @@ import { ChainArtifacts } from '@usecannon/builder';
 import { FC, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { AbiFunction, Abi as AbiType } from 'abitype';
 import { Function } from '@/features/Packages/Function';
-import { HasSubnavContext } from './Tabs/InteractTab';
+import { SubnavContext } from './Tabs/InteractTab';
 import SearchInput from '@/components/SearchInput';
 import { scroller, Element, scrollSpy } from 'react-scroll';
 
 import { Button, ButtonProps } from '@chakra-ui/react';
 import React from 'react';
 import { useRouter } from 'next/router';
+import { CustomSpinner } from '@/components/CustomSpinner';
 
 const getSelectorSlug = (f: AbiFunction) =>
   `selector-${viem.toFunctionSelector(f)}`;
@@ -50,7 +52,16 @@ const ButtonLink: React.FC<ButtonProps & { selected?: boolean }> = ({
   </Button>
 );
 
+const FunctionRowsSkeleton = () => (
+  <Flex direction="column" gap={2}>
+    {Array.from({ length: 7 }).map((_, i) => (
+      <Skeleton key={i} height={3} />
+    ))}
+  </Flex>
+);
+
 export const Abi: FC<{
+  isLoading?: boolean;
   abi?: AbiType;
   address: viem.Address;
   cannonOutputs: ChainArtifacts;
@@ -59,6 +70,7 @@ export const Abi: FC<{
   onDrawerOpen?: () => void;
   packageUrl?: string;
 }> = ({
+  isLoading,
   abi,
   contractSource,
   address,
@@ -70,7 +82,7 @@ export const Abi: FC<{
   const router = useRouter();
   const isSmall = useBreakpointValue([true, true, false]);
   const [searchTerm, setSearchTerm] = useState<string>('');
-  const hasSubnav = useContext(HasSubnavContext);
+  const hasSubnav = useContext(SubnavContext);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [selectedSelector, setSelectedSelector] = useState<string | null>(null);
   const [isUpdatingRoute, setIsUpdatingRoute] = useState(false);
@@ -184,26 +196,30 @@ export const Abi: FC<{
                   color="gray.200"
                   letterSpacing="0.1px"
                 >
-                  {'<< Read Functions'}
+                  Read Functions
                 </Heading>
               </Flex>
 
-              {readContractMethods
-                ?.filter((f) => f.name.includes(searchTerm))
-                .map((f, index) => (
-                  <ButtonLink
-                    key={index}
-                    selected={selectedSelector == getSelectorSlug(f)}
-                    disabled={isUpdatingRoute}
-                    onClick={() => handleMethodClick(f)}
-                  >
-                    {f.name}(
-                    {f.inputs
-                      .map((i) => i.type + (i.name ? ' ' + i.name : ''))
-                      .join(',')}
-                    )
-                  </ButtonLink>
-                ))}
+              {isLoading ? (
+                <FunctionRowsSkeleton />
+              ) : (
+                readContractMethods
+                  ?.filter((f) => f.name.includes(searchTerm))
+                  .map((f, index) => (
+                    <ButtonLink
+                      key={index}
+                      selected={selectedSelector == getSelectorSlug(f)}
+                      disabled={isUpdatingRoute}
+                      onClick={() => handleMethodClick(f)}
+                    >
+                      {f.name}(
+                      {f.inputs
+                        .map((i) => i.type + (i.name ? ' ' + i.name : ''))
+                        .join(',')}
+                      )
+                    </ButtonLink>
+                  ))
+              )}
             </Box>
             <Box mt={4}>
               <Flex flexDirection="row" px="2" alignItems="center" mb="1.5">
@@ -213,31 +229,35 @@ export const Abi: FC<{
                   color="gray.200"
                   letterSpacing="0.1px"
                 >
-                  {'>> Write Functions'}
+                  Write Functions
                 </Heading>
               </Flex>
-              {writeContractMethods
-                ?.filter((f) => f.name.includes(searchTerm))
-                .map((f, index) => (
-                  <ButtonLink
-                    key={index}
-                    disabled={isUpdatingRoute}
-                    selected={selectedSelector == getSelectorSlug(f)}
-                    onClick={() => handleMethodClick(f)}
-                  >
-                    {f.name}(
-                    {f.inputs
-                      .map((i) => i.type + (i.name ? ' ' + i.name : ''))
-                      .join(',')}
-                    )
-                  </ButtonLink>
-                ))}
+              {isLoading ? (
+                <FunctionRowsSkeleton />
+              ) : (
+                writeContractMethods
+                  ?.filter((f) => f.name.includes(searchTerm))
+                  .map((f, index) => (
+                    <ButtonLink
+                      key={index}
+                      disabled={isUpdatingRoute}
+                      selected={selectedSelector == getSelectorSlug(f)}
+                      onClick={() => handleMethodClick(f)}
+                    >
+                      {f.name}(
+                      {f.inputs
+                        .map((i) => i.type + (i.name ? ' ' + i.name : ''))
+                        .join(',')}
+                      )
+                    </ButtonLink>
+                  ))
+              )}
             </Box>
           </Box>
         </Flex>
 
         {/* Methods Interactions */}
-        <Box background="black" ref={containerRef} w="100%">
+        <Flex background="black" ref={containerRef} w="100%" direction="column">
           <Alert
             status="warning"
             bg="gray.900"
@@ -258,29 +278,36 @@ export const Abi: FC<{
             borderBottom="1px solid"
             borderColor="gray.700"
             gap={4}
+            flex={1}
           >
-            {allContractMethods?.map((f) => (
-              <Element
-                name={getSelectorSlug(f)}
-                key={`${address}-${getSelectorSlug(f)}`}
-              >
-                <Function
-                  selected={selectedSelector == getSelectorSlug(f)}
-                  f={f}
-                  abi={abi as AbiType}
-                  address={address}
-                  cannonOutputs={cannonOutputs}
-                  chainId={chainId}
-                  contractSource={contractSource}
-                  onDrawerOpen={onDrawerOpen}
-                  collapsible
-                  showFunctionSelector={false}
-                  packageUrl={packageUrl}
-                />
-              </Element>
-            ))}
+            {isLoading ? (
+              <Flex align="center" justify="center" flex={1}>
+                <CustomSpinner />
+              </Flex>
+            ) : (
+              allContractMethods?.map((f) => (
+                <Element
+                  name={getSelectorSlug(f)}
+                  key={`${address}-${getSelectorSlug(f)}`}
+                >
+                  <Function
+                    selected={selectedSelector == getSelectorSlug(f)}
+                    f={f}
+                    abi={abi as AbiType}
+                    address={address}
+                    cannonOutputs={cannonOutputs}
+                    chainId={chainId}
+                    contractSource={contractSource}
+                    onDrawerOpen={onDrawerOpen}
+                    collapsible
+                    showFunctionSelector={false}
+                    packageUrl={packageUrl}
+                  />
+                </Element>
+              ))
+            )}
           </Flex>
-        </Box>
+        </Flex>
       </Flex>
     </Flex>
   );

packages/website/src/features/Packages/Interact.tsx

@@ -1,4 +1,3 @@
-import { CustomSpinner } from '@/components/CustomSpinner';
 import { Abi } from '@/features/Packages/Abi';
 import chains from '@/helpers/chains';
 import { useQueryIpfsDataParsed } from '@/hooks/ipfs';
@@ -9,6 +8,7 @@ import {
   Flex,
   Heading,
   Link,
+  Skeleton,
   Text,
   useBreakpointValue,
   useDisclosure,
@@ -20,20 +20,16 @@ import {
   PackageReference,
 } from '@usecannon/builder';
 import { FC, useContext, useEffect, useState } from 'react';
-import { Address } from 'viem';
-import { HasSubnavContext } from './Tabs/InteractTab';
+
 import QueueDrawer from '@/features/Deploy/QueueDrawer';
 import { useQuery } from '@tanstack/react-query';
 import { getPackage } from '@/helpers/api';
+import { usePackageUrlParams } from '@/hooks/routing/usePackageUrlParams';
+import { SubnavContext } from '@/features/Packages/Tabs/InteractTab';
 
-export const Interact: FC<{
-  name: string;
-  tag: string;
-  variant: string;
-  moduleName: string;
-  contractName: string;
-  contractAddress: Address;
-}> = ({ name, tag, variant, moduleName, contractName, contractAddress }) => {
+const Interact: FC = () => {
+  const { variant, tag, name, moduleName, contractName, contractAddress } =
+    usePackageUrlParams();
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const [chainId, preset] = PackageReference.parseVariant(variant);
@@ -96,35 +92,30 @@ export const Interact: FC<{
     findContract(cannonOutputs.contracts, name, cannonOutputs.imports);
   }, [deploymentData.data, contractName]);
 
-  const deployUrl = `https://repo.usecannon.com/${packagesQuery.data.data.deployUrl.replace(
+  const deployUrl = `https://repo.usecannon.com/${packagesQuery.data?.data.deployUrl.replace(
     'ipfs://',
     ''
   )}`;
 
   const etherscanUrl =
     (
       Object.values(chains).find(
-        (chain) => chain.id === packagesQuery.data.data?.chainId
+        (chain) => chain.id === packagesQuery.data?.data?.chainId
       ) as any
     )?.blockExplorers?.default?.url ?? 'https://etherscan.io';
 
   const isMobile = useBreakpointValue([true, true, false]);
 
-  const hasSubnav = useContext(HasSubnavContext);
+  const subnavContext = useContext(SubnavContext);
 
-  if (packagesQuery.isPending || deploymentData.isPending) {
-    return (
-      <Box py="20" textAlign="center">
-        <CustomSpinner m="auto" />
-      </Box>
-    );
-  }
+  const isLoadingData = packagesQuery.isPending || deploymentData.isPending;
 
   return (
     <>
+      {/* Header */}
       <Flex
         position={{ md: 'sticky' }}
-        top={hasSubnav ? 65 : 0}
+        top={subnavContext.hasSubnav ? 65 : 0}
         zIndex={3}
         bg="gray.800"
         p={2}
@@ -133,9 +124,14 @@ export const Interact: FC<{
         borderBottom="1px solid"
         borderColor="gray.600"
       >
+        {/* Token */}
         <Box py={2} px={[1, 1, 3]}>
           <Heading display="inline-block" as="h4" size="md" mb={1.5}>
-            {contract?.contractName}
+            {isLoadingData ? (
+              <Skeleton height={1} width={100} mt={1} mb={1} />
+            ) : (
+              contract?.contractName
+            )}
           </Heading>
           <Text color="gray.300" fontSize="xs" fontFamily="mono">
             <Link
@@ -153,6 +149,8 @@ export const Interact: FC<{
             </Link>
           </Text>
         </Box>
+
+        {/* IPFS Url */}
         <Box p={1} ml={[0, 0, 'auto']}>
           <Flex
             justifyContent={['flex-start', 'flex-start', 'flex-end']}
@@ -174,26 +172,30 @@ export const Interact: FC<{
                 href={deployUrl}
               >
                 {isMobile
-                  ? `${packagesQuery.data.data.deployUrl.substring(
+                  ? `${packagesQuery.data?.data.deployUrl.substring(
                       0,
                       13
-                    )}...${packagesQuery.data.data?.deployUrl.slice(-4)}`
-                  : packagesQuery.data.data?.deployUrl}
+                    )}...${packagesQuery.data?.data?.deployUrl.slice(-4)}`
+                  : packagesQuery.data?.data?.deployUrl}
               </Link>
             </Text>
           </Flex>
         </Box>
       </Flex>
+
       <Abi
+        isLoading={isLoadingData}
         abi={contract?.abi}
         contractSource={contract?.sourceName}
         address={contractAddress}
         cannonOutputs={cannonOutputs}
-        chainId={packagesQuery.data.data?.chainId}
+        chainId={packagesQuery.data?.data?.chainId}
         onDrawerOpen={onOpen}
-        packageUrl={packagesQuery.data.data.deployUrl}
+        packageUrl={packagesQuery.data?.data.deployUrl}
       />
       <QueueDrawer isOpen={isOpen} onClose={onClose} onOpen={onOpen} />
     </>
   );
 };
+
+export default Interact;