feat: enhance task page with loading and outdated state management like workerpool, app and dataset pages

Author: ErwanDecoster

src/modules/tasks/task/TaskDatasetsTable.tsx

@@ -3,6 +3,7 @@ import { SchemaSearchPaginatedQuery } from '@/graphql/dataprotector/graphql';
 import { DatasetsQuery } from '@/graphql/poco/graphql';
 import { execute } from '@/graphql/pocoBulk/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/datasets/datasetsTable/columns';
@@ -85,8 +86,31 @@ function useTaskDatasetsData({ taskId }: { taskId: string }) {
   };
 }
 
-export function TaskDatasetsTable({ taskId }: { taskId: string }) {
-  const { data: datasets, hasPastError } = useTaskDatasetsData({ taskId });
+export function TaskDatasetsTable({
+  taskId,
+  setLoading,
+  setOutdated,
+}: {
+  taskId: string;
+  setLoading: (loading: boolean) => void;
+  setOutdated: (outdated: boolean) => void;
+}) {
+  const {
+    data: datasets,
+    hasPastError,
+    isLoading,
+    isRefetching,
+    isError,
+  } = useTaskDatasetsData({ taskId });
+
+  useEffect(
+    () => setLoading(isLoading || isRefetching),
+    [isLoading, isRefetching, setLoading]
+  );
+  useEffect(
+    () => setOutdated(datasets.length > 0 && isError),
+    [datasets.length, isError, setOutdated]
+  );
 
   return hasPastError && !datasets.length ? (
     <ErrorAlert message="An error occurred during task datasets loading." />

src/modules/tasks/task/TaskRawData.tsx

@@ -1,5 +1,6 @@
 import { TABLE_REFETCH_INTERVAL } from '@/config';
 import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { getIExec } from '@/externals/iexecSdkClient';
 import { useLoginLogout } from '@/hooks/useLoginLogout';
@@ -52,15 +53,30 @@ function useTaskRawData({
 export function TaskRawData({
   taskWorkerpoolId,
   taskId,
+  setLoading,
+  setOutdated,
 }: {
   taskWorkerpoolId?: string;
   taskId: string;
+  setLoading: (loading: boolean) => void;
+  setOutdated: (outdated: boolean) => void;
 }) {
   const {
     data: tasks,
     hasPastError,
     isLoading,
+    isRefetching,
+    isError,
   } = useTaskRawData({ taskWorkerpoolId, taskId });
+
+  useEffect(
+    () => setLoading(isLoading || isRefetching),
+    [isLoading, isRefetching, setLoading]
+  );
+  useEffect(
+    () => setOutdated(Boolean(tasks) && !isLoading && isError),
+    [tasks, isLoading, isError, setOutdated]
+  );
   const { address: userAddress } = useUserStore();
   const { login } = useLoginLogout();
 

src/routes/$chainSlug/_layout/task/$taskId.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 TaskIcon from '@/components/icons/TaskIcon';
 import { BackButton } from '@/components/ui/BackButton';
 import { useTabParam } from '@/hooks/usePageParam';
@@ -71,6 +72,9 @@ function TasksRoute() {
   const tabLabels = ['DETAILS', 'RAW DATA', 'DATASETS'];
   const [currentTab, setCurrentTab] = useTabParam('dealTab', tabLabels, 0);
 
+  const [isLoadingChild, setIsLoadingChild] = useState(false);
+  const [isOutdatedChild, setIsOutdatedChild] = useState(false);
+
   const taskDetails = task ? buildTaskDetails({ task }) : undefined;
 
   if (!isValid) {
@@ -81,6 +85,9 @@ function TasksRoute() {
     return <ErrorAlert message="Task not found." />;
   }
 
+  const showOutdated = task && (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">
@@ -89,14 +96,12 @@ function TasksRoute() {
           <h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
             <TaskIcon size={24} />
             Task details
-            {!task && 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 />
@@ -121,9 +126,17 @@ function TasksRoute() {
           <TaskRawData
             taskWorkerpoolId={task?.deal.workerpool.address}
             taskId={taskId}
+            setLoading={setIsLoadingChild}
+            setOutdated={setIsOutdatedChild}
+          />
+        )}
+        {currentTab === 2 && (
+          <TaskDatasetsTable
+            taskId={taskId}
+            setLoading={setIsLoadingChild}
+            setOutdated={setIsOutdatedChild}
           />
         )}
-        {currentTab === 2 && <TaskDatasetsTable taskId={taskId} />}
       </div>
     </div>
   );