skeleton for contract tab

stubs/contract.ts

+import type { SmartContract } from 'types/api/contract';
+
+export const CONTRACT_CODE_UNVERIFIED = {
+  creation_bytecode: '0x60806040526e',
+  deployed_bytecode: '0x608060405233',
+  is_self_destructed: false,
+} as SmartContract;
+
+export const CONTRACT_CODE_VERIFIED = {
+  abi: [],
+  additional_sources: [],
+  can_be_visualized_via_sol2uml: true,
+  compiler_settings: {
+    compilationTarget: {
+      'contracts/StubContract.sol': 'StubContract',
+    },
+    evmVersion: 'london',
+    libraries: {},
+    metadata: {
+      bytecodeHash: 'ipfs',
+    },
+    optimizer: {
+      enabled: false,
+      runs: 200,
+    },
+    remappings: [],
+  },
+  compiler_version: 'v0.8.7+commit.e28d00a7',
+  creation_bytecode: '0x6080604052348',
+  deployed_bytecode: '0x60806040',
+  evm_version: 'london',
+  external_libraries: [],
+  file_path: 'contracts/StubContract.sol',
+  is_verified: true,
+  name: 'StubContract',
+  optimization_enabled: false,
+  optimization_runs: 200,
+  source_code: 'source_code',
+  verified_at: '2023-02-21T14:39:16.906760Z',
+} as unknown as SmartContract;

ui/address/contract/ContractSourceCode.tsx

-import { Flex, Text, Tooltip } from '@chakra-ui/react';
+import { Flex, Skeleton, Text, Tooltip } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
@@ -16,14 +16,15 @@ interface Props {
   isViper: boolean;
   filePath?: string;
   additionalSource?: SmartContract['additional_sources'];
+  isLoading?: boolean;
 }
 
-const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, additionalSource }: Props) => {
+const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, additionalSource, isLoading }: Props) => {
   const heading = (
-    <Text fontWeight={ 500 }>
+    <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>
       <span>Contract source code</span>
       <Text whiteSpace="pre" as="span" variant="secondary"> ({ isViper ? 'Vyper' : 'Solidity' })</Text>
-    </Text>
+    </Skeleton>
   );
 
   const diagramLink = hasSol2Yml && address ? (
@@ -31,9 +32,10 @@ const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, addi
       <LinkInternal
         href={ route({ pathname: '/visualize/sol2uml', query: { address } }) }
         ml="auto"
-        mr={ 3 }
       >
-        View UML diagram
+        <Skeleton isLoaded={ !isLoading }>
+          View UML diagram
+        </Skeleton>
       </LinkInternal>
     </Tooltip>
   ) : null;
@@ -46,7 +48,7 @@ const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, addi
   }, [ additionalSource, data, filePath, isViper ]);
 
   const copyToClipboard = editorData.length === 1 ?
-    <CopyToClipboard text={ editorData[0].source_code }/> :
+    <CopyToClipboard text={ editorData[0].source_code } isLoading={ isLoading } ml={ 3 }/> :
     null;
 
   return (
@@ -56,7 +58,7 @@ const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, addi
         { diagramLink }
         { copyToClipboard }
       </Flex>
-      <CodeEditor data={ editorData }/>
+      { isLoading ? <Skeleton h="557px" w="100%"/> : <CodeEditor data={ editorData }/> }
     </section>
   );
 };

ui/shared/RawDataSnippet.tsx

-import { Box, Flex, Text, chakra, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, chakra, useColorModeValue, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import CopyToClipboard from './CopyToClipboard';
@@ -11,33 +11,36 @@ interface Props {
   beforeSlot?: React.ReactNode;
   textareaMaxHeight?: string;
   showCopy?: boolean;
+  isLoading?: boolean;
 }
 
-const RawDataSnippet = ({ data, className, title, rightSlot, beforeSlot, textareaMaxHeight, showCopy = true }: Props) => {
+const RawDataSnippet = ({ data, className, title, rightSlot, beforeSlot, textareaMaxHeight, showCopy = true, isLoading }: Props) => {
   // see issue in theme/components/Textarea.ts
   const bgColor = useColorModeValue('#f5f5f6', '#1a1b1b');
   return (
     <Box className={ className } as="section" title={ title }>
       { (title || rightSlot || showCopy) && (
         <Flex justifyContent={ title ? 'space-between' : 'flex-end' } alignItems="center" mb={ 3 }>
-          { title && <Text fontWeight={ 500 }>{ title }</Text> }
+          { title && <Skeleton fontWeight={ 500 } isLoaded={ !isLoading }>{ title }</Skeleton> }
           { rightSlot }
-          { typeof data === 'string' && showCopy && <CopyToClipboard text={ data }/> }
+          { typeof data === 'string' && showCopy && <CopyToClipboard text={ data } isLoading={ isLoading }/> }
         </Flex>
       ) }
       { beforeSlot }
-      <Box
+      <Skeleton
         p={ 4 }
         bgColor={ bgColor }
         maxH={ textareaMaxHeight || '400px' }
+        minH={ isLoading ? '200px' : undefined }
         fontSize="sm"
         borderRadius="md"
         wordBreak="break-all"
         whiteSpace="pre-wrap"
         overflowY="auto"
+        isLoaded={ !isLoading }
       >
         { data }
-      </Box>
+      </Skeleton>
     </Box>
   );
 };