fix: update query state variables to indicate refetch and loading

Author: ErwanDecoster

src/routes/apps/index.tsx

@@ -17,7 +17,7 @@ export const Route = createFileRoute('/apps/')({
 function useAppsData(currentPage: number) {
   const skip = currentPage * TABLE_LENGTH;
 
-  const { data, isFetching, isPending, isError } = useQuery({
+  const { data, isLoading, isRefetching, isError } = useQuery({
     queryKey: ['apps', currentPage],
     queryFn: () => execute(appsQuery, { length: TABLE_LENGTH, skip }),
     refetchInterval: TABLE_REFETCH_INTERVAL,
@@ -30,12 +30,12 @@ function useAppsData(currentPage: number) {
       destination: `/apps/${app.address}`,
     })) ?? [];
 
-  return { data: formattedData, isFetching, isPending, isError };
+  return { data: formattedData, isLoading, isRefetching, isError };
 }
 
 function AppsRoute() {
   const [currentPage, setCurrentPage] = useState(0);
-  const { data, isFetching, isPending, isError } = useAppsData(currentPage);
+  const { data, isLoading, isRefetching, isError } = useAppsData(currentPage);
 
   return (
     <div className="mt-8 grid gap-6">
@@ -49,7 +49,7 @@ function AppsRoute() {
             (outdated)
           </span>
         )}
-        {isFetching && isPending && <LoaderCircle className="animate-spin" />}
+        {isLoading && isRefetching && <LoaderCircle className="animate-spin" />}
       </h1>
 
       <DataTable columns={columns} data={data} />

src/routes/datasets/index.tsx

@@ -17,7 +17,7 @@ export const Route = createFileRoute('/datasets/')({
 function useDatasetsData(currentPage: number) {
   const skip = currentPage * TABLE_LENGTH;
 
-  const { data, isFetching, isPending, isError } = useQuery({
+  const { data, isLoading, isRefetching, isError } = useQuery({
     queryKey: ['datasets', currentPage],
     queryFn: () => execute(datasetsQuery, { length: TABLE_LENGTH, skip }),
     refetchInterval: TABLE_REFETCH_INTERVAL,
@@ -30,12 +30,12 @@ function useDatasetsData(currentPage: number) {
       destination: `/datasets/${dataset.address}`,
     })) ?? [];
 
-  return { data: formattedData, isFetching, isPending, isError };
+  return { data: formattedData, isLoading, isRefetching, isError };
 }
 
 function DatasetsRoute() {
   const [currentPage, setCurrentPage] = useState(0);
-  const { data, isFetching, isPending, isError } = useDatasetsData(currentPage);
+  const { data, isLoading, isRefetching, isError } = useDatasetsData(currentPage);
 
   return (
     <div className="mt-8 grid gap-6">
@@ -49,7 +49,7 @@ function DatasetsRoute() {
             (outdated)
           </span>
         )}
-        {isFetching && isPending && <LoaderCircle className="animate-spin" />}
+        {(isLoading && isRefetching) && <LoaderCircle className="animate-spin" />}
       </h1>
 
       <DataTable columns={columns} data={data} />

src/routes/deals/index.tsx

@@ -17,7 +17,7 @@ export const Route = createFileRoute('/deals/')({
 function useDealsData(currentPage: number) {
   const skip = currentPage * TABLE_LENGTH;
 
-  const { data, isFetching, isPending, isError } = useQuery({
+  const { data, isLoading, isRefetching, isError } = useQuery({
     queryKey: ['deals', currentPage],
     queryFn: () => execute(dealsQuery, { length: TABLE_LENGTH, skip }),
     refetchInterval: TABLE_REFETCH_INTERVAL,
@@ -30,12 +30,12 @@ function useDealsData(currentPage: number) {
       destination: `/deals/${deal.dealid}`,
     })) ?? [];
 
-  return { data: formattedData, isFetching, isPending, isError };
+  return { data: formattedData, isLoading, isRefetching, isError };
 }
 
 function DealsRoute() {
   const [currentPage, setCurrentPage] = useState(0);
-  const { data, isFetching, isPending, isError } = useDealsData(currentPage);
+  const { data, isLoading, isRefetching, isError } = useDealsData(currentPage);
 
   return (
     <div className="mt-8 grid gap-6">
@@ -49,7 +49,7 @@ function DealsRoute() {
             (outdated)
           </span>
         )}
-        {isFetching && isPending && <LoaderCircle className="animate-spin" />}
+        {(isLoading || isRefetching) && <LoaderCircle className="animate-spin" />}
       </h1>
 
       <DataTable columns={columns} data={data} />

src/routes/tasks/index.tsx

@@ -17,7 +17,7 @@ export const Route = createFileRoute('/tasks/')({
 function useTasksData(currentPage: number) {
   const skip = currentPage * TABLE_LENGTH;
 
-  const { data, isFetching, isPending, isError } = useQuery({
+  const { data, isLoading, isRefetching, isError } = useQuery({
     queryKey: ['tasks', currentPage],
     queryFn: () => execute(tasksQuery, { length: TABLE_LENGTH, skip }),
     refetchInterval: TABLE_REFETCH_INTERVAL,
@@ -30,12 +30,12 @@ function useTasksData(currentPage: number) {
       destination: `/tasks/${task.taskid}`,
     })) ?? [];
 
-  return { data: formattedData, isFetching, isPending, isError };
+  return { data: formattedData, isLoading, isRefetching, isError };
 }
 
 function TasksRoute() {
   const [currentPage, setCurrentPage] = useState(0);
-  const { data, isFetching, isPending, isError } = useTasksData(currentPage);
+  const { data, isLoading, isRefetching, isError } = useTasksData(currentPage);
 
   return (
     <div className="mt-8 grid gap-6">
@@ -49,7 +49,7 @@ function TasksRoute() {
             (outdated)
           </span>
         )}
-        {isFetching && isPending && <LoaderCircle className="animate-spin" />}
+        {(isLoading || isRefetching) && <LoaderCircle className="animate-spin" />}
       </h1>
 
       <DataTable columns={columns} data={data} />

src/routes/workerpools/index.tsx

@@ -17,7 +17,7 @@ export const Route = createFileRoute('/workerpools/')({
 function useWorkerpoolsData(currentPage: number) {
   const skip = currentPage * TABLE_LENGTH;
 
-  const { data, isFetching, isPending, isError } = useQuery({
+  const { data, isLoading, isRefetching, isError } = useQuery({
     queryKey: ['workerpools', currentPage],
     queryFn: () => execute(workerpoolsQuery, { length: TABLE_LENGTH, skip }),
     refetchInterval: TABLE_REFETCH_INTERVAL,
@@ -30,12 +30,12 @@ function useWorkerpoolsData(currentPage: number) {
       destination: `/workerpools/${workerpool.address}`,
     })) ?? [];
 
-  return { data: formattedData, isFetching, isPending, isError };
+  return { data: formattedData, isLoading, isRefetching, isError };
 }
 
 function WorkerpoolsRoute() {
   const [currentPage, setCurrentPage] = useState(0);
-  const { data, isFetching, isPending, isError } =
+  const { data, isLoading, isRefetching, isError } =
     useWorkerpoolsData(currentPage);
 
   return (
@@ -50,7 +50,7 @@ function WorkerpoolsRoute() {
             (outdated)
           </span>
         )}
-        {isFetching && isPending && <LoaderCircle className="animate-spin" />}
+        {(isLoading && isRefetching) && <LoaderCircle className="animate-spin" />}
       </h1>
 
       <DataTable columns={columns} data={data} />