chore(explorer): remove skelton loader after error (#2423)

kadena-community · Jul 20, 2024 · 3bd5cb5 · 3bd5cb5
1 parent 0450bf3
commit 3bd5cb5
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 11 deletions.
diff --git a/.changeset/short-items-remain.md b/.changeset/short-items-remain.md
@@ -0,0 +1,5 @@
+---
+'@kadena/explorer': patch
+---
+
+remove skeleton loader when account transactions fails to load
diff --git a/packages/apps/explorer/src/components/account-transfers-table/account-transfers-table.tsx b/packages/apps/explorer/src/components/account-transfers-table/account-transfers-table.tsx
@@ -2,6 +2,7 @@ import type { AccountTransfersQuery, Transfer } from '@/__generated__/sdk';
 import { useAccountTransfersQuery } from '@/__generated__/sdk';
 import { usePagination } from '@/hooks/usePagination';
 import { graphqlIdFor } from '@/utils/graphqlIdFor';
+import { Heading, Stack } from '@kadena/kode-ui';
 import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
 import CompactTable from '../compact-table/compact-table';
@@ -52,6 +53,13 @@ const AccountTransfersTable: FC<{ accountName: string }> = ({
 
   if (innerData.node?.__typename !== 'FungibleAccount') return null;
 
+  if (error)
+    return (
+      <Stack justifyContent="center">
+        <Heading as="h5">There was an issue with loading the results</Heading>
+      </Stack>
+    );
+
   return (
     <CompactTable
       setPage={handlePageChange}

diff --git a/...s/apps/explorer/src/components/loading-skeleton/loading-data/loading-data-accountquery.ts b/...s/apps/explorer/src/components/loading-skeleton/loading-data/loading-data-accountquery.ts
@@ -5,9 +5,9 @@ export const loadingData: AccountQuery = {
     // transactions: {
     //   totalCount: 0,
     // },
-    transfers: {
-      totalCount: 0,
-    },
+    // transfers: {
+    //   totalCount: 0,
+    // },
     accountName: '0',
     totalBalance: 0,
     chainAccounts: [

diff --git a/packages/apps/explorer/src/components/logo/logo.tsx b/packages/apps/explorer/src/components/logo/logo.tsx
@@ -80,6 +80,7 @@ const Logo: FC = () => {
 
   return (
     <svg
+      style={{ width: '100%' }}
       data-style="kdacolor"
       width="230"
       height="40"

diff --git a/packages/apps/explorer/src/components/search/search-component/search-component.css.ts b/packages/apps/explorer/src/components/search/search-component/search-component.css.ts
@@ -37,7 +37,7 @@ export const searchInputClass = style([
   {
     height: 46,
     border: 'none',
-
+    overflowX: 'auto',
     selectors: {
       '&::placeholder': {
         fontFamily: tokens.kda.foundation.typography.family.primaryFont,

diff --git a/packages/apps/explorer/src/graphql/queries/account.graph.ts b/packages/apps/explorer/src/graphql/queries/account.graph.ts
@@ -10,9 +10,9 @@ export const account: DocumentNode = gql`
       # transactions {
       #   totalCount
       # }
-      transfers {
-        totalCount
-      }
+      # transfers {
+      #   totalCount
+      # }
     }
   }
 `;

diff --git a/packages/apps/explorer/src/pages/[networkSlug]/account/[accountName].tsx b/packages/apps/explorer/src/pages/[networkSlug]/account/[accountName].tsx
@@ -170,10 +170,7 @@ const Account: FC = () => {
             >
               <AccountTransactionsTable accountName={accountName} />
             </TabItem> */}
-            <TabItem
-              title={`Transfers (${fungibleAccount?.transfers.totalCount})`}
-              key="Transfers"
-            >
+            <TabItem title={`Transfers`} key="Transfers">
               <AccountTransfersTable accountName={accountName} />
             </TabItem>
           </Tabs>