Improves run rendering latency

Adds a visibility sensor and also limits the number queried to something more reasonable. We will be adding pagination in the future.
DAGWorks-Inc · Aug 15, 2024 · 9bc04b8 · 9bc04b8
1 parent 9598c60
commit 9bc04b8
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/ui/frontend/src/components/dashboard/Runs/RunSummary.tsx b/ui/frontend/src/components/dashboard/Runs/RunSummary.tsx
@@ -662,8 +662,7 @@ export const RunSummary = (props: {
       : null;
 
   // Quick buffer to ensure no runs are missed
-  console.log("minDate", minDate);
-  console.log("maxDate", maxDate);
+
   if (minDate !== null) {
     minDate.setDate(minDate.getDate() - 1);
   }

diff --git a/ui/frontend/src/components/dashboard/Runs/Runs.tsx b/ui/frontend/src/components/dashboard/Runs/Runs.tsx
@@ -8,7 +8,7 @@ import { Loading } from "../../common/Loading";
 import { RunSummary } from "./RunSummary";
 import { skipToken } from "@reduxjs/toolkit/dist/query";
 
-export const MAX_RUNS_QUERIED = 1000;
+export const MAX_RUNS_QUERIED = 100;
 
 const Runs: React.FC<{ project: Project }> = ({ project }) => {
   // TODO -- figure out what happens if the project hasn't loaded yet

diff --git a/ui/frontend/src/components/dashboard/Runs/RunsTable.tsx b/ui/frontend/src/components/dashboard/Runs/RunsTable.tsx
@@ -11,6 +11,7 @@ import {
 import { RunLink, VersionLink } from "../../common/CommonLinks";
 import { DurationDisplay } from "../../common/Datetime";
 import { adjustStatusForDuration } from "../../../utils";
+import VisibilitySensor from "react-visibility-sensor";
 
 const MAX_COMPARE_RUNS = 5;
 
@@ -353,6 +354,11 @@ export const RunsTable: FC<{
                   .map((run, index) => {
                     const runID = run.id as number;
                     return (
+                      <VisibilitySensor
+                          key={index}
+                          offset={{ top: -1000, bottom: -1000 }}
+                          partialVisibility={true}
+                        >
                       <TableRow
                         projectId={projectId as number}
                         run={run}
@@ -382,6 +388,7 @@ export const RunsTable: FC<{
                           setRunsToCompare(Array.from(runsToCompare));
                         }}
                       />
+                      </VisibilitySensor>
                     );
                   })}
               </tbody>