add content loader

ui/pages/ApiKeys.tsx

@@ -13,6 +13,7 @@ import ApiKeyTable from 'ui/apiKey/ApiKeyTable/ApiKeyTable';
 import DeleteApiKeyModal from 'ui/apiKey/DeleteApiKeyModal';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import AccountPageHeader from 'ui/shared/AccountPageHeader';
+import ContentLoader from 'ui/shared/ContentLoader';
 import Page from 'ui/shared/Page/Page';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
@@ -59,13 +60,19 @@ const ApiKeysPage: React.FC = () => {
 
   const content = (() => {
     if (isLoading && !data) {
-      return (
+      const loader = isMobile ? <ContentLoader/> : (
         <>
-          { description }
           <SkeletonTable columns={ [ '100%', '108px' ] }/>
           <Skeleton height="48px" width="156px" marginTop={ 8 }/>
         </>
       );
+
+      return (
+        <>
+          { description }
+          { loader }
+        </>
+      );
     }
 
     if (isError) {

ui/pages/CustomAbi.tsx

@@ -12,6 +12,7 @@ import CustomAbiTable from 'ui/customAbi/CustomAbiTable/CustomAbiTable';
 import DeleteCustomAbiModal from 'ui/customAbi/DeleteCustomAbiModal';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import AccountPageHeader from 'ui/shared/AccountPageHeader';
+import ContentLoader from 'ui/shared/ContentLoader';
 import Page from 'ui/shared/Page/Page';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
@@ -55,13 +56,19 @@ const CustomAbiPage: React.FC = () => {
 
   const content = (() => {
     if (isLoading && !data) {
-      return (
+      const loader = isMobile ? <ContentLoader/> : (
         <>
-          { description }
           <SkeletonTable columns={ [ '100%', '108px' ] }/>
           <Skeleton height="44px" width="156px" marginTop={ 8 }/>
         </>
       );
+
+      return (
+        <>
+          { description }
+          { loader }
+        </>
+      );
     }
 
     if (isError) {

ui/pages/Watchlist.tsx

@@ -8,6 +8,7 @@ import fetch from 'lib/client/fetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import AccountPageHeader from 'ui/shared/AccountPageHeader';
+import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Page from 'ui/shared/Page/Page';
 import SkeletonTable from 'ui/shared/SkeletonTable';
@@ -55,13 +56,19 @@ const WatchList: React.FC = () => {
 
   let content;
   if (isLoading && !data) {
-    content = (
+    const loader = isMobile ? <ContentLoader/> : (
       <>
-        { description }
         <SkeletonTable columns={ [ '70%', '30%', '160px', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>
       </>
     );
+
+    content = (
+      <>
+        { description }
+        { loader }
+      </>
+    );
   } else if (isError) {
     content = <DataFetchAlert/>;
   } else {

ui/privateTags/PrivateAddressTags.tsx

@@ -7,6 +7,7 @@ import type { AddressTags, AddressTag } from 'types/api/account';
 import fetch from 'lib/client/fetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
+import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
@@ -54,13 +55,19 @@ const PrivateAddressTags = () => {
   );
 
   if (isLoading && !addressTagsData) {
-    return (
+    const loader = isMobile ? <ContentLoader/> : (
       <>
-        { description }
         <SkeletonTable columns={ [ '60%', '40%', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>
       </>
     );
+
+    return (
+      <>
+        { description }
+        { loader }
+      </>
+    );
   }
 
   if (isError) {

ui/privateTags/PrivateTransactionTags.tsx

@@ -7,6 +7,7 @@ import type { TransactionTags, TransactionTag } from 'types/api/account';
 import fetch from 'lib/client/fetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
+import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
@@ -54,13 +55,19 @@ const PrivateTransactionTags = () => {
   );
 
   if (isLoading && !transactionTagsData) {
-    return (
+    const loader = isMobile ? <ContentLoader/> : (
       <>
-        { description }
         <SkeletonTable columns={ [ '75%', '25%', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>
       </>
     );
+
+    return (
+      <>
+        { description }
+        { loader }
+      </>
+    );
   }
 
   if (isError) {

ui/publicTags/PublicTagsData.tsx

@@ -8,6 +8,7 @@ import fetch from 'lib/client/fetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import PublicTagListItem from 'ui/publicTags/PublicTagTable/PublicTagListItem';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
+import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
@@ -54,13 +55,19 @@ const PublicTagsData = ({ changeToFormScreen, onTagDelete }: Props) => {
   );
 
   if (isLoading) {
-    return (
+    const loader = isMobile ? <ContentLoader/> : (
       <>
-        { description }
         <SkeletonTable columns={ [ '50%', '25%', '25%', '108px' ] }/>
         <Skeleton height="48px" width="270px" marginTop={ 8 }/>
       </>
     );
+
+    return (
+      <>
+        { description }
+        { loader }
+      </>
+    );
   }
 
   if (isError) {