feat: enhance DealTasksTable and DealAssociatedDealsTable with loading and outdated state management

Author: ErwanDecoster

src/modules/deals/deal/DealAssociatedDealsTable.tsx

@@ -9,6 +9,7 @@ import { columns } from '@/modules/deals/dealsTable/columns';
 import useUserStore from '@/stores/useUser.store';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
 import { dealAssociatedDealsQuery } from './dealAssociatedDealsQuery';
+import { useEffect } from 'react';
 
 function useDealAssociatedDealsData({
   dealId,
@@ -56,17 +57,37 @@ function useDealAssociatedDealsData({
   };
 }
 
-export function DealAssociatedDealsTable({ dealId }: { dealId: string }) {
+export function DealAssociatedDealsTable({
+  dealId,
+  setLoading,
+  setOutdated,
+}: {
+  dealId: string;
+  setLoading: (isLoading: boolean) => void;
+  setOutdated: (isOutdated: boolean) => void;
+}) {
   const [currentPage, setCurrentPage] = usePageParam('dealAssociatedDealsPage');
   const {
     data: associatedDeals,
+    isError,
+    isLoading,
+    isRefetching,
     additionalPages,
     hasPastError,
   } = useDealAssociatedDealsData({
     dealId,
     currentPage,
   });
 
+  useEffect(
+    () => setLoading(isLoading || isRefetching),
+    [isLoading, isRefetching, setLoading]
+  );
+  useEffect(
+    () => setOutdated(associatedDeals.length > 0 && isError),
+    [associatedDeals.length, isError, setOutdated]
+  );
+
   return (
     <div className="space-y-6">
       {hasPastError && !associatedDeals.length ? (

src/modules/deals/deal/DealTasksTable.tsx

@@ -1,6 +1,7 @@
 import { DETAIL_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
 import { execute } from '@/graphql/poco/execute';
 import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
 import { DataTable } from '@/components/DataTable';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { columns } from '@/modules/tasks/tasksTable/columns';
@@ -40,10 +41,31 @@ function useDealTasksData({ dealId }: { dealId: string }) {
   };
 }
 
-export function DealTasksTable({ dealId }: { dealId: string }) {
-  const { data: tasks, hasPastError } = useDealTasksData({ dealId });
+export function DealTasksTable({
+  dealId,
+  setLoading,
+  setOutdated,
+}: {
+  dealId: string;
+  setLoading: (isLoading: boolean) => void;
+  setOutdated: (isOutdated: boolean) => void;
+}) {
+  const {
+    data: tasks,
+    isError,
+    isLoading,
+    isRefetching,
+    hasPastError,
+  } = useDealTasksData({ dealId });
 
-  // TODO: handle loading state
+  useEffect(
+    () => setLoading(isLoading || isRefetching),
+    [isLoading, isRefetching, setLoading]
+  );
+  useEffect(
+    () => setOutdated(tasks.length > 0 && isError),
+    [tasks.length, isError, setOutdated]
+  );
 
   const extendedColumns = [
     {

src/routes/$chainSlug/_layout/deal/$dealId.tsx

@@ -3,6 +3,7 @@ import { execute } from '@/graphql/poco/execute';
 import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { LoaderCircle } from 'lucide-react';
+import { useState } from 'react';
 import DealIcon from '@/components/icons/DealIcon';
 import { BackButton } from '@/components/ui/BackButton';
 import { useTabParam } from '@/hooks/usePageParam';
@@ -71,6 +72,9 @@ function DealsRoute() {
     error,
   } = useDealData((dealId as string).toLowerCase(), chainId!);
 
+  const [isLoadingChild, setIsLoadingChild] = useState(false);
+  const [isOutdatedChild, setIsOutdatedChild] = useState(false);
+
   const dealDetails = deal
     ? buildDealDetails({
         deal,
@@ -87,6 +91,9 @@ function DealsRoute() {
     return <ErrorAlert className="my-16" message="Deal not found." />;
   }
 
+  const showOutdated = deal && (isError || isOutdatedChild);
+  const showLoading = isLoading || isRefetching || isLoadingChild;
+
   return (
     <div className="mt-8 flex flex-col gap-6">
       <div className="mt-6 flex flex-col justify-between lg:flex-row">
@@ -95,14 +102,12 @@ function DealsRoute() {
           <h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
             <DealIcon size={24} />
             Deal details
-            {!deal && isError && (
+            {showOutdated && (
               <span className="text-muted-foreground text-sm font-light">
                 (outdated)
               </span>
             )}
-            {(isLoading || isRefetching) && (
-              <LoaderCircle className="animate-spin" />
-            )}
+            {showLoading && <LoaderCircle className="animate-spin" />}
           </h1>
           <div className="flex items-center gap-2">
             <BackButton />
@@ -123,8 +128,20 @@ function DealsRoute() {
           ) : (
             <DetailsTable details={dealDetails || {}} />
           ))}
-        {currentTab === 1 && <DealTasksTable dealId={dealId} />}
-        {currentTab === 2 && <DealAssociatedDealsTable dealId={dealId} />}
+        {currentTab === 1 && (
+          <DealTasksTable
+            dealId={dealId}
+            setLoading={setIsLoadingChild}
+            setOutdated={setIsOutdatedChild}
+          />
+        )}
+        {currentTab === 2 && (
+          <DealAssociatedDealsTable
+            dealId={dealId}
+            setLoading={setIsLoadingChild}
+            setOutdated={setIsOutdatedChild}
+          />
+        )}
       </div>
     </div>
   );