add skeletons

ui/marketplace/AppSecurityReport.tsx

@@ -12,24 +12,24 @@ type Props = {
   securityReport?: any; // eslint-disable-line @typescript-eslint/no-explicit-any
   height?: string | undefined;
   showContractList: () => void;
+  isLoading?: boolean;
 }
 
-const AppSecurityReport = ({ securityReport, height, showContractList }: Props) => {
-  if (!securityReport) {
+const AppSecurityReport = ({ securityReport, height, showContractList, isLoading }: Props) => {
+  if (!securityReport && !isLoading) {
     return null;
   }
 
   const {
-    overallInfo: {
-      securityScore,
-      solidityScanContractsNumber,
-      issueSeverityDistribution,
-      totalIssues,
-    },
-  } = securityReport;
+    securityScore = 0,
+    solidityScanContractsNumber = 0,
+    issueSeverityDistribution = {},
+    totalIssues = 0,
+  } = securityReport?.overallInfo || {};
 
   return (
     <SolidityscanReportButton
+      isLoading={ isLoading }
       height={ height }
       score={ securityScore }
       popoverContent={ (

ui/marketplace/ContractListButton.tsx

-import { Link, Tooltip } from '@chakra-ui/react';
+import { Link, Tooltip, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 import type { MouseEvent } from 'react';
 
@@ -28,9 +28,10 @@ interface Props {
   children: string;
   onClick: (event: MouseEvent) => void;
   variant: ContractListButtonVariants;
+  isLoading?: boolean;
 }
 
-const ContractListButton = ({ children, onClick, variant }: Props) => {
+const ContractListButton = ({ children, onClick, variant, isLoading }: Props) => {
   const { icon, iconColor, tooltip } = values[variant];
   return (
     <Tooltip
@@ -41,15 +42,24 @@ const ContractListButton = ({ children, onClick, variant }: Props) => {
       openDelay={ 500 }
       width="250px"
     >
-      <Link
-        fontSize="sm"
-        onClick={ onClick }
-        fontWeight="500"
+      <Skeleton
+        isLoaded={ !isLoading }
         display="inline-flex"
+        alignItems="center"
+        width={ isLoading ? '40px' : 'auto' }
+        height="30px"
+        borderRadius="base"
       >
-        { icon && <IconSvg name={ icon } boxSize={ 5 } color={ iconColor } mr={ 1 }/> }
-        { children }
-      </Link>
+        <Link
+          fontSize="sm"
+          onClick={ onClick }
+          fontWeight="500"
+          display="inline-flex"
+        >
+          { icon && <IconSvg name={ icon } boxSize={ 5 } color={ iconColor } mr={ 1 }/> }
+          { children }
+        </Link>
+      </Skeleton>
     </Tooltip>
   );
 };

ui/marketplace/MarketplaceListWithScores/ListItem.tsx

@@ -93,18 +93,27 @@ const ListItem = ({ app, onInfoClick, isFavorite, onFavoriteClick, isLoading, on
         </Flex>
         <Flex alignItems="center">
           <Flex flex={ 1 } gap={ 3 } alignItems="center">
-            { securityReport ? (
+            { (securityReport || isLoading) ? (
               <>
                 <AppSecurityReport
+                  isLoading={ isLoading }
                   securityReport={ securityReport }
                   showContractList={ showAnalyzedContracts }
                   height="30px"
                 />
-                <ContractListButton onClick={ showAllContracts } variant={ ContractListButtonVariants.ALL_CONTRACTS }>
-                  { securityReport.overallInfo.totalContractsNumber }
+                <ContractListButton
+                  onClick={ showAllContracts }
+                  variant={ ContractListButtonVariants.ALL_CONTRACTS }
+                  isLoading={ isLoading }
+                >
+                  { securityReport?.overallInfo.totalContractsNumber }
                 </ContractListButton>
-                <ContractListButton onClick={ showVerifiedContracts } variant={ ContractListButtonVariants.VERIFIED_CONTRACTS }>
-                  { securityReport.overallInfo.verifiedNumber }
+                <ContractListButton
+                  onClick={ showVerifiedContracts }
+                  variant={ ContractListButtonVariants.VERIFIED_CONTRACTS }
+                  isLoading={ isLoading }
+                >
+                  { securityReport?.overallInfo.verifiedNumber }
                 </ContractListButton>
               </>
             ) : (
@@ -113,9 +122,7 @@ const ListItem = ({ app, onInfoClick, isFavorite, onFavoriteClick, isLoading, on
               </chakra.span>
             ) }
           </Flex>
-          { !isLoading && (
-            <MoreInfoButton onClick={ handleInfoClick }/>
-          ) }
+          <MoreInfoButton onClick={ handleInfoClick } isLoading={ isLoading }/>
         </Flex>
       </Flex>
     </ListItemMobile>

ui/marketplace/MarketplaceListWithScores/MoreInfoButton.tsx

-import { Link } from '@chakra-ui/react';
+import { Link, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 import type { MouseEvent } from 'react';
 
 interface Props {
   onClick: (event: MouseEvent) => void;
+  isLoading?: boolean;
 }
 
-const MoreInfoButton = ({ onClick }: Props) => (
-  <Link
-    fontSize="sm"
-    onClick={ onClick }
-    fontWeight="500"
+const MoreInfoButton = ({ onClick, isLoading }: Props) => (
+  <Skeleton
+    isLoaded={ !isLoading }
     display="inline-flex"
+    alignItems="center"
+    height="30px"
+    borderRadius="base"
   >
-    More info
-  </Link>
+    <Link
+      fontSize="sm"
+      onClick={ onClick }
+      fontWeight="500"
+      display="inline-flex"
+    >
+      More info
+    </Link>
+  </Skeleton>
 );
 
 export default MoreInfoButton;

ui/marketplace/MarketplaceListWithScores/TableItem.tsx

-import { Td, Tr, IconButton } from '@chakra-ui/react';
+import { Td, Tr, IconButton, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 import type { MouseEvent } from 'react';
 
@@ -61,50 +61,64 @@ const TableItem = ({
   return (
     <Tr>
       <Td verticalAlign="middle" px={ 2 }>
-        <IconButton
-          aria-label="Mark as favorite"
-          title="Mark as favorite"
-          variant="ghost"
-          colorScheme="gray"
-          w={ 9 }
-          h={ 8 }
-          onClick={ handleFavoriteClick }
-          icon={ isFavorite ?
-            <IconSvg name="star_filled" w={ 5 } h={ 5 } color="yellow.400"/> :
-            <IconSvg name="star_outline" w={ 5 } h={ 5 } color="gray.400"/>
-          }
-        />
+        <Skeleton isLoaded={ !isLoading }>
+          <IconButton
+            aria-label="Mark as favorite"
+            title="Mark as favorite"
+            variant="ghost"
+            colorScheme="gray"
+            w={ 9 }
+            h={ 8 }
+            onClick={ handleFavoriteClick }
+            icon={ isFavorite ?
+              <IconSvg name="star_filled" w={ 5 } h={ 5 } color="yellow.400"/> :
+              <IconSvg name="star_outline" w={ 5 } h={ 5 } color="gray.400"/>
+            }
+          />
+        </Skeleton>
       </Td>
       <Td verticalAlign="middle">
         <AppLink app={ app } isLoading={ isLoading } onAppClick={ onAppClick } isLarge/>
       </Td>
       <Td verticalAlign="middle">
-        { securityReport ? (
-          <AppSecurityReport securityReport={ securityReport } showContractList={ showAnalyzedContracts }/>
+        { (securityReport || isLoading) ? (
+          <AppSecurityReport
+            securityReport={ securityReport }
+            showContractList={ showAnalyzedContracts }
+            isLoading={ isLoading }
+          />
         ) : (
           <DataNotAvailable/>
         ) }
       </Td>
       <Td verticalAlign="middle">
-        { securityReport ? (
-          <ContractListButton onClick={ showAllContracts } variant={ ContractListButtonVariants.ALL_CONTRACTS }>
-            { securityReport.overallInfo.totalContractsNumber }
+        { (securityReport || isLoading) ? (
+          <ContractListButton
+            onClick={ showAllContracts }
+            variant={ ContractListButtonVariants.ALL_CONTRACTS }
+            isLoading={ isLoading }
+          >
+            { securityReport?.overallInfo.totalContractsNumber }
           </ContractListButton>
         ) : (
           <DataNotAvailable/>
         ) }
       </Td>
       <Td verticalAlign="middle">
-        { securityReport ? (
-          <ContractListButton onClick={ showVerifiedContracts } variant={ ContractListButtonVariants.VERIFIED_CONTRACTS }>
-            { securityReport.overallInfo.verifiedNumber }
+        { (securityReport || isLoading) ? (
+          <ContractListButton
+            onClick={ showVerifiedContracts }
+            variant={ ContractListButtonVariants.VERIFIED_CONTRACTS }
+            isLoading={ isLoading }
+          >
+            { securityReport?.overallInfo.verifiedNumber }
           </ContractListButton>
         ) : (
           <DataNotAvailable/>
         ) }
       </Td>
       <Td verticalAlign="middle" isNumeric>
-        <MoreInfoButton onClick={ handleInfoClick }/>
+        <MoreInfoButton onClick={ handleInfoClick } isLoading={ isLoading }/>
       </Td>
     </Tr>
   );