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
@@ -40,6 +41,14 @@ const ContractListButton = ({ children, onClick, variant }: Props) => {
       isDisabled={ !tooltip }
       openDelay={ 500 }
       width="250px"
+    >
+      <Skeleton
+        isLoaded={ !isLoading }
+        display="inline-flex"
+        alignItems="center"
+        width={ isLoading ? '40px' : 'auto' }
+        height="30px"
+        borderRadius="base"
       >
         <Link
           fontSize="sm"
@@ -50,6 +59,7 @@ const ContractListButton = ({ children, onClick, variant }: Props) => {
           { 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) => (
+const MoreInfoButton = ({ onClick, isLoading }: Props) => (
+  <Skeleton
+    isLoaded={ !isLoading }
+    display="inline-flex"
+    alignItems="center"
+    height="30px"
+    borderRadius="base"
+  >
     <Link
       fontSize="sm"
       onClick={ onClick }
@@ -15,6 +23,7 @@ const MoreInfoButton = ({ onClick }: Props) => (
     >
       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,6 +61,7 @@ const TableItem = ({
   return (
     <Tr>
       <Td verticalAlign="middle" px={ 2 }>
+        <Skeleton isLoaded={ !isLoading }>
           <IconButton
             aria-label="Mark as favorite"
             title="Mark as favorite"
@@ -74,37 +75,50 @@ const TableItem = ({
               <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>
   );