skeleton fixes

ui/pages/Deposits.tsx

@@ -31,14 +31,25 @@ const Deposits = () => {
 
   const text = (() => {
     if (countersQuery.isLoading) {
-      return <Skeleton w={{ base: '100%', lg: '320px' }} h="26px" mb={ 6 } mt={{ base: 0, lg: 6 }}/>;
+      return (
+        <Skeleton
+          w={{ base: '100%', lg: '320px' }}
+          h="24px"
+          mb={{ base: 6, lg: isPaginationVisible ? 0 : 7 }}
+          mt={{ base: 0, lg: isPaginationVisible ? 0 : 7 }}
+        />
+      );
     }
 
     if (countersQuery.isError) {
       return null;
     }
 
-    return <Text mb={{ base: 6, lg: isPaginationVisible ? 0 : 6 }}>A total of { countersQuery.data.toLocaleString('en') } deposits found</Text>;
+    return (
+      <Text mb={{ base: 6, lg: isPaginationVisible ? 0 : 6 }} lineHeight="32px">
+        A total of { countersQuery.data.toLocaleString('en') } deposits found
+      </Text>
+    );
   })();
 
   const actionBar = (

ui/pages/OutputRoots.tsx

@@ -30,7 +30,14 @@ const OutputRoots = () => {
 
   const text = (() => {
     if (countersQuery.isLoading || isLoading) {
-      return <Skeleton w={{ base: '100%', lg: '400px' }} h={{ base: '48px', lg: '26px' }} mb={{ base: 6, lg: 7 }} mt={{ base: 0, lg: 7 }}/>;
+      return (
+        <Skeleton
+          w={{ base: '100%', lg: '400px' }}
+          h={{ base: '48px', lg: '24px' }}
+          mb={{ base: 6, lg: isPaginationVisible ? 0 : 7 }}
+          mt={{ base: 0, lg: isPaginationVisible ? 0 : 7 }}
+        />
+      );
     }
 
     if (countersQuery.isError || isError || data?.items.length === 0) {

ui/pages/TxnBatches.tsx

@@ -31,7 +31,14 @@ const TxnBatches = () => {
 
   const text = (() => {
     if (countersQuery.isLoading || isLoading) {
-      return <Skeleton w={{ base: '100%', lg: '400px' }} h={{ base: '48px', lg: '26px' }} mb={{ base: 6, lg: 7 }} mt={{ base: 0, lg: 7 }}/>;
+      return (
+        <Skeleton
+          w={{ base: '100%', lg: '400px' }}
+          h={{ base: '48px', lg: '24px' }}
+          mb={{ base: 6, lg: isPaginationVisible ? 0 : 7 }}
+          mt={{ base: 0, lg: isPaginationVisible ? 0 : 7 }}
+        />
+      );
     }
 
     if (countersQuery.isError || isError || data.items.length === 0) {

ui/pages/Withdrawals.tsx

@@ -31,14 +31,25 @@ const Withdrawals = () => {
 
   const text = (() => {
     if (countersQuery.isLoading) {
-      return <Skeleton w={{ base: '100%', lg: '320px' }} h="26px" mb={ 6 } mt={{ base: 0, lg: 6 }}/>;
+      return (
+        <Skeleton
+          w={{ base: '100%', lg: '320px' }}
+          h="24px"
+          mb={{ base: 6, lg: isPaginationVisible ? 0 : 7 }}
+          mt={{ base: 0, lg: isPaginationVisible ? 0 : 7 }}
+        />
+      );
     }
 
     if (countersQuery.isError) {
       return null;
     }
 
-    return <Text mb={{ base: 6, lg: isPaginationVisible ? 0 : 6 }}>A total of { countersQuery.data.toLocaleString('en') } withdrawals found</Text>;
+    return (
+      <Text mb={{ base: 6, lg: isPaginationVisible ? 0 : 6 }} lineHeight="32px">
+        A total of { countersQuery.data.toLocaleString('en') } withdrawals found
+      </Text>
+    );
   })();
 
   const actionBar = (