feat: bring back refresh indicator

web/src/app/(app)/workflows/[workflow_id]/@runs/page.tsx

@@ -13,12 +13,12 @@ export default async function Page({
   const workflow_id = params.workflow_id;
 
   return (
-    <Card className="w-full h-fit min-w-0">
-      <CardHeader className="relative">
+    <Card className="w-full h-fit min-w-0 relative">
+      <CardHeader>
         <CardTitle>Run</CardTitle>
-        <div className="absolute right-6 top-6">
+        {/* <div className="absolute right-6 top-6">
           <RouteRefresher interval={5000} autoRefresh={false} />
-        </div>
+        </div> */}
       </CardHeader>
 
       <CardContent>

web/src/components/RunsTable.tsx

@@ -16,6 +16,7 @@ import {
 import { PaginationControl } from "./PaginationControl";
 import { RunDisplay } from "./RunDisplay";
 import useSWR from "swr";
+import { LoadingIcon } from "@/components/LoadingIcon";
 
 const itemPerPage = 6;
 const pageParser = parseAsInteger.withDefault(1);
@@ -25,7 +26,7 @@ export function RunsTable(props: {
   searchParams: { [key: string]: any };
 }) {
   const page = pageParser.parse(props.searchParams?.page ?? undefined) ?? 1;
-  const { data, error, isLoading } = useSWR(
+  const { data, error, isLoading, isValidating } = useSWR(
     "runs+" + page,
     async () => {
       const data = await getAllRunstableContent({
@@ -45,6 +46,11 @@ export function RunsTable(props: {
 
   return (
     <div>
+      {isValidating ? (
+        <div className="absolute right-8 top-8">
+          <LoadingIcon />
+        </div>
+      ) : null}
       <div className="overflow-auto h-fit w-full">
         <Table className="">
           {/* {data?.allRuns.length === 0 && (