fix: cache flicker

GaloyMoney · Jan 16, 2025 · b267940 · b267940
1 parent 662f074
commit b267940
Show file tree

Hide file tree

Showing 20 changed files with 64 additions and 66 deletions.
diff --git a/apps/admin-panel/app/actions/list.tsx b/apps/admin-panel/app/actions/list.tsx
@@ -93,7 +93,7 @@ const List: React.FC<ListProps> = ({ dashboard = false }) => {
 
   const more = approvalProcesses.length - NUMBER_OF_ITEMS_IN_DASHBOARD
 
-  if (loading) return <ActionListSkeleton />
+  if (loading && !data) return <ActionListSkeleton />
 
   const getVisitUrl = (data: ActionNode) => {
     if (

diff --git a/apps/admin-panel/app/balance-sheet/page.tsx b/apps/admin-panel/app/balance-sheet/page.tsx
@@ -103,7 +103,7 @@ export default function BalanceSheetPage() {
     <>
       <BalanceSheet
         data={data?.balanceSheet}
-        loading={loading}
+        loading={loading && !data}
         error={error}
         dateRange={dateRange}
         setDateRange={handleDateChange}
@@ -130,7 +130,7 @@ const BalanceSheet = ({
 
   if (error) return <div className="text-destructive">{error.message}</div>
 
-  if (loading) {
+  if (loading && !data) {
     return (
       <Card>
         <CardHeader>

diff --git a/apps/admin-panel/app/chart-of-accounts/page.tsx b/apps/admin-panel/app/chart-of-accounts/page.tsx
@@ -110,7 +110,7 @@ const ChartOfAccountsValues: React.FC<ChartOfAccountsValuesProps> = ({
   error,
   dateRange,
 }) => {
-  if (loading) return <LoadingSkeleton />
+  if (loading && !data) return <LoadingSkeleton />
   if (error) return <p className="text-destructive">{error.message}</p>
 
   return (
@@ -185,15 +185,15 @@ function ChartOfAccountsPage() {
           <TabsContent value="onBalanceSheet">
             <ChartOfAccountsValues
               data={onBalanceSheetData?.chartOfAccounts}
-              loading={onBalanceSheetLoading}
+              loading={onBalanceSheetLoading && !onBalanceSheetData}
               error={onBalanceSheetError}
               dateRange={dateRange}
             />
           </TabsContent>
           <TabsContent value="offBalanceSheet">
             <ChartOfAccountsValues
               data={offBalanceSheetData?.offBalanceSheetChartOfAccounts}
-              loading={offBalanceSheetLoading}
+              loading={offBalanceSheetLoading && !offBalanceSheetData}
               error={offBalanceSheetError}
               dateRange={dateRange}
             />

diff --git a/apps/admin-panel/app/committees/[committee-id]/page.tsx b/apps/admin-panel/app/committees/[committee-id]/page.tsx
@@ -49,7 +49,7 @@ function CommitteePage({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data?.committee])
 
-  if (loading) {
+  if (loading && !data) {
     return <DetailsPageSkeleton tabs={0} detailItems={3} tabsCards={1} />
   }
   if (error) return <div className="text-destructive">{error.message}</div>

diff --git a/apps/admin-panel/app/credit-facilities/[credit-facility-id]/layout.tsx b/apps/admin-panel/app/credit-facilities/[credit-facility-id]/layout.tsx
@@ -133,7 +133,7 @@ export default function CreditFacilityLayout({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data?.creditFacility, currentTab])
 
-  if (loading) return <DetailsPageSkeleton detailItems={4} tabs={4} />
+  if (loading && !data) return <DetailsPageSkeleton detailItems={4} tabs={4} />
   if (error) return <div className="text-destructive">{error.message}</div>
   if (!data?.creditFacility) return <div>Not found</div>
 

diff --git a/apps/admin-panel/app/customers/[customer-id]/kyc-status.tsx b/apps/admin-panel/app/customers/[customer-id]/kyc-status.tsx
@@ -61,7 +61,7 @@ export const KycStatus: React.FC<KycStatusProps> = ({ customerId }) => {
     }
   }
 
-  if (loading) return <Skeleton />
+  if (loading && !data) return <Skeleton />
 
   const details: DetailItemProps[] = [
     {

diff --git a/apps/admin-panel/app/customers/[customer-id]/layout.tsx b/apps/admin-panel/app/customers/[customer-id]/layout.tsx
@@ -82,7 +82,7 @@ export default function CustomerLayout({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data?.customer, currentTab])
 
-  if (loading) return <DetailsPageSkeleton detailItems={3} tabs={6} />
+  if (loading && !data) return <DetailsPageSkeleton detailItems={3} tabs={6} />
   if (error) return <div className="text-destructive">{error.message}</div>
   if (!data || !data.customer) return null
 

diff --git a/apps/admin-panel/app/dashboard/page.tsx b/apps/admin-panel/app/dashboard/page.tsx
@@ -28,7 +28,7 @@ gql`
 
 const Dashboard = () => {
   const { data, loading } = useDashboardQuery({
-    fetchPolicy: "no-cache",
+    fetchPolicy: "cache-and-network",
   })
   const { data: priceData } = useGetRealtimePriceUpdatesQuery({
     fetchPolicy: "cache-only",
@@ -48,7 +48,7 @@ const Dashboard = () => {
     <div className="w-full h-full flex flex-col gap-2 mt-2">
       <div className="relative w-full flex flex-col justify-center items-start">
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-2 w-full">
-          {loading ? (
+          {loading && !data ? (
             <>
               <CardSkeleton />
               <CardSkeleton />

diff --git a/apps/admin-panel/app/disbursals/[disbursal-id]/page.tsx b/apps/admin-panel/app/disbursals/[disbursal-id]/page.tsx
@@ -54,7 +54,7 @@ function DisbursalPage({
     variables: { id: disbursalId },
   })
 
-  if (loading) {
+  if (loading && !data) {
     return <DetailsPageSkeleton tabs={0} detailItems={5} tabsCards={0} />
   }
   if (error) return <div className="text-destructive">{error.message}</div>

diff --git a/apps/admin-panel/app/policies/[policy-id]/page.tsx b/apps/admin-panel/app/policies/[policy-id]/page.tsx
@@ -63,7 +63,7 @@ function PolicyPage({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data?.policy])
 
-  if (loading) {
+  if (loading && !data) {
     return <DetailsPageSkeleton tabs={0} detailItems={3} tabsCards={0} />
   }
   if (error) return <div className="text-destructive">{error.message}</div>

diff --git a/apps/admin-panel/app/profit-and-loss/page.tsx b/apps/admin-panel/app/profit-and-loss/page.tsx
@@ -134,7 +134,7 @@ export default function ProfitAndLossStatementPage() {
   return (
     <ProfitAndLossStatement
       data={ProfitAndLossStatementData?.profitAndLossStatement}
-      loading={ProfitAndLossStatementLoading}
+      loading={ProfitAndLossStatementLoading && !ProfitAndLossStatementData}
       error={ProfitAndLossStatementError}
       dateRange={dateRange}
       setDateRange={handleDateChange}
@@ -162,7 +162,7 @@ const ProfitAndLossStatement = ({
   const categories = data?.categories
 
   if (error) return <div className="text-destructive">{error.message}</div>
-  if (loading) {
+  if (loading && !data) {
     return (
       <Card>
         <CardHeader>

diff --git a/apps/admin-panel/app/regulatory-reporting/page.tsx b/apps/admin-panel/app/regulatory-reporting/page.tsx
@@ -154,7 +154,7 @@ const RegulatoryReportingPage: React.FC = () => {
         </CardHeader>
 
         <CardContent>
-          {loading ? (
+          {loading && !data ? (
             <div className="w-full md:max-w-[50rem]">
               <LoadingSkeleton />
             </div>

diff --git a/apps/admin-panel/app/terms-templates/[terms-template-id]/page.tsx b/apps/admin-panel/app/terms-templates/[terms-template-id]/page.tsx
@@ -45,7 +45,8 @@ function TermsTemplatePage({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data?.termsTemplate])
 
-  if (loading) return <DetailsPageSkeleton tabs={0} detailItems={8} tabsCards={0} />
+  if (loading && !data)
+    return <DetailsPageSkeleton tabs={0} detailItems={8} tabsCards={0} />
   if (error) return <div className="text-destructive">{error.message}</div>
   if (!data?.termsTemplate) return <div>Not found</div>
 

diff --git a/apps/admin-panel/app/trial-balance/page.tsx b/apps/admin-panel/app/trial-balance/page.tsx
@@ -237,7 +237,7 @@ const TrialBalanceValues: React.FC<TrialBalanceValuesProps> = ({
   const subAccounts = data?.subAccounts
 
   if (error) return <div className="text-destructive">{error.message}</div>
-  if (loading) {
+  if (loading && !data) {
     return <LoadingSkeleton />
   }
   if (!total) return <div>No data</div>
@@ -364,7 +364,7 @@ function TrialBalancePage() {
           <TabsContent value="onBalanceSheet">
             <TrialBalanceValues
               data={onBalanceSheetData?.trialBalance}
-              loading={onBalanceSheetLoading}
+              loading={onBalanceSheetLoading && !onBalanceSheetData}
               error={onBalanceSheetError}
               dateRange={dateRange}
               setDateRange={handleDateChange}
@@ -373,7 +373,7 @@ function TrialBalancePage() {
           <TabsContent value="offBalanceSheet">
             <TrialBalanceValues
               data={offBalanceSheetData?.offBalanceSheetTrialBalance}
-              loading={offBalanceSheetLoading}
+              loading={offBalanceSheetLoading && !offBalanceSheetData}
               error={offBalanceSheetError}
               dateRange={dateRange}
               setDateRange={handleDateChange}

diff --git a/apps/admin-panel/app/users/[user-id]/page.tsx b/apps/admin-panel/app/users/[user-id]/page.tsx
@@ -45,7 +45,7 @@ function UserPage({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data?.user])
 
-  if (loading) {
+  if (loading && !data) {
     return <DetailsPageSkeleton tabs={0} tabsCards={0} />
   }
   if (error) return <div className="text-destructive">{error.message}</div>

diff --git a/apps/admin-panel/app/withdrawals/[withdrawal-id]/page.tsx b/apps/admin-panel/app/withdrawals/[withdrawal-id]/page.tsx
@@ -51,7 +51,7 @@ function WithdrawalPage({
     variables: { id: withdrawalId },
   })
 
-  if (loading) {
+  if (loading && !data) {
     return <DetailsPageSkeleton tabs={0} tabsCards={0} />
   }
   if (error) return <div className="text-destructive">{error.message}</div>

diff --git a/apps/admin-panel/components/app-sidebar/market-rate.tsx b/apps/admin-panel/components/app-sidebar/market-rate.tsx
@@ -10,7 +10,7 @@ export function MarketRate() {
     .centsToUsd(data?.realtimePrice?.usdCentsPerBtc || NaN)
     .toLocaleString()
 
-  if (loading) return <Skeleton className="h-4 w-full py-2" />
+  if (loading && !data) return <Skeleton className="h-4 w-full py-2" />
 
   return (
     <div className="flex items-center px-2 py-2 gap-1 text-sm text-muted-foreground font-medium">

diff --git a/apps/admin-panel/components/app-sidebar/user-block.tsx b/apps/admin-panel/components/app-sidebar/user-block.tsx
@@ -33,7 +33,7 @@ gql`
 export function UserBlock() {
   const { data, loading } = useAvatarQuery()
 
-  if (loading) {
+  if (loading && !data) {
     return (
       <SidebarMenu>
         <SidebarMenuItem>

diff --git a/apps/admin-panel/components/data-table/index.tsx b/apps/admin-panel/components/data-table/index.tsx
@@ -127,7 +127,7 @@ const DataTable = <T,>({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data.length])
 
-  if (loading) {
+  if (loading && !data) {
     return isMobile ? (
       <div className="space-y-4" data-testid="loading-skeleton">
         {Array.from({ length: 5 }).map((_, idx) => (

diff --git a/apps/admin-panel/components/paginated-table/index.tsx b/apps/admin-panel/components/paginated-table/index.tsx
@@ -255,7 +255,7 @@ const PaginatedTable = <T,>({
     }
   }
 
-  if (loading) {
+  if (loading && !data) {
     return isMobile ? (
       <div className="space-y-4" data-testid="loading-skeleton">
         {Array.from({ length: pageSize }).map((_, idx) => (
@@ -501,45 +501,42 @@ const PaginatedTable = <T,>({
             </TableHeader>
           )}
           <TableBody>
-            {!loading &&
-              displayData.map(({ node }, idx) => (
-                <TableRow
-                  key={idx}
-                  data-testid={`table-row-${idx}`}
-                  onClick={() => onClick?.(node)}
-                  tabIndex={0}
-                  className={`${onClick ? "cursor-pointer" : ""} ${
-                    focusedRowIndex === idx ? "bg-muted" : ""
-                  } hover:bg-muted/50 transition-colors outline-none`}
-                  onFocus={() => setFocusedRowIndex(idx)}
-                  role="row"
-                  aria-selected={focusedRowIndex === idx}
-                >
-                  {columns.map((col) => (
-                    <TableCell
-                      key={col.key as string}
-                      className="whitespace-normal break-words"
-                    >
-                      {col.render
-                        ? col.render(node[col.key], node)
-                        : String(node[col.key])}
-                    </TableCell>
-                  ))}
-                  {navigateTo && (
-                    <TableCell>
-                      <Link href={navigateTo(node)}>
-                        <Button
-                          variant="outline"
-                          className="w-full flex items-center justify-between"
-                        >
-                          View
-                          <ArrowRight className="h-4 w-4" />
-                        </Button>
-                      </Link>
-                    </TableCell>
-                  )}
-                </TableRow>
-              ))}
+            {displayData.map(({ node }, idx) => (
+              <TableRow
+                key={idx}
+                data-testid={`table-row-${idx}`}
+                onClick={() => onClick?.(node)}
+                tabIndex={0}
+                className={`${onClick ? "cursor-pointer" : ""} ${
+                  focusedRowIndex === idx ? "bg-muted" : ""
+                } hover:bg-muted/50 transition-colors outline-none`}
+                onFocus={() => setFocusedRowIndex(idx)}
+                role="row"
+                aria-selected={focusedRowIndex === idx}
+              >
+                {columns.map((col) => (
+                  <TableCell
+                    key={col.key as string}
+                    className="whitespace-normal break-words"
+                  >
+                    {col.render ? col.render(node[col.key], node) : String(node[col.key])}
+                  </TableCell>
+                ))}
+                {navigateTo && (
+                  <TableCell>
+                    <Link href={navigateTo(node)}>
+                      <Button
+                        variant="outline"
+                        className="w-full flex items-center justify-between"
+                      >
+                        View
+                        <ArrowRight className="h-4 w-4" />
+                      </Button>
+                    </Link>
+                  </TableCell>
+                )}
+              </TableRow>
+            ))}
           </TableBody>
         </Table>
         <Separator />
-Original file line number
+Diff line change
@@ Expand Up @@
         }
       }
-      if (loading) return <Skeleton />
+      if (loading && !data) return <Skeleton />
       const details: DetailItemProps[] = [
         {
@@ Expand Down @@