Only load dashboard widgets that are visible

Author: matt-aitken

apps/webapp/app/components/query/QueryEditor.tsx

@@ -772,7 +772,7 @@ export function QueryEditor({
                                 onRename={handleRenameTitle}
                               />
                             }
-                            query={query}
+                            query={editorRef.current?.getQuery() ?? defaultQuery}
                             data={{
                               rows: results.rows,
                               columns: results.columns,
@@ -826,7 +826,7 @@ export function QueryEditor({
                         <ResultsChart
                           rows={results.rows}
                           columns={results.columns}
-                          query={query}
+                          query={editorRef.current?.getQuery() ?? defaultQuery}
                           chartConfig={chartConfig}
                           onChartConfigChange={handleChartConfigChange}
                           queryTitle={queryTitle}
@@ -875,7 +875,7 @@ export function QueryEditor({
                         <ResultsBigNumber
                           rows={results.rows}
                           columns={results.columns}
-                          query={query}
+                          query={editorRef.current?.getQuery() ?? defaultQuery}
                           bigNumberConfig={bigNumberConfig}
                           onBigNumberConfigChange={setBigNumberConfig}
                           queryTitle={queryTitle}

apps/webapp/app/hooks/useElementVisibility.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+
+type UseElementVisibilityOptions = {
+  onVisibilityChange?: (isVisible: boolean) => void;
+};
+
+export function useElementVisibility({
+  onVisibilityChange,
+}: UseElementVisibilityOptions = {}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const isVisibleRef = useRef(false);
+  const callbackRef = useRef(onVisibilityChange);
+  callbackRef.current = onVisibilityChange;
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        const nowVisible = entry.isIntersecting;
+        if (isVisibleRef.current !== nowVisible) {
+          isVisibleRef.current = nowVisible;
+          callbackRef.current?.(nowVisible);
+        }
+      },
+      { threshold: 0 }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return { ref, isVisibleRef };
+}

apps/webapp/app/routes/resources.metric.tsx

@@ -10,6 +10,7 @@ import {
   type QueryWidgetConfig,
   type QueryWidgetData,
 } from "~/components/metrics/QueryWidget";
+import { useElementVisibility } from "~/hooks/useElementVisibility";
 import { useInterval } from "~/hooks/useInterval";
 
 const Scope = z.union([z.literal("environment"), z.literal("organization"), z.literal("project")]);
@@ -178,6 +179,9 @@ export function MetricWidget({
   propsRef.current = props;
 
   const submit = useCallback(() => {
+    // Skip fetching if the widget is not visible on screen
+    if (!isVisibleRef.current) return;
+
     // Abort any in-flight request for this widget
     abortControllerRef.current?.abort();
 
@@ -209,15 +213,23 @@ export function MetricWidget({
         if (!controller.signal.aborted) {
           // Only surface the error if there's no existing successful data to preserve
           setResponse((prev) =>
-            prev?.success
-              ? prev
-              : { success: false, error: err.message || "Network error" }
+            prev?.success ? prev : { success: false, error: err.message || "Network error" }
           );
           setIsLoading(false);
         }
       });
   }, []);
 
+  // Track visibility so we only fetch for on-screen widgets.
+  // When a widget scrolls into view and has no data yet, trigger a load.
+  const { ref: visibilityRef, isVisibleRef } = useElementVisibility({
+    onVisibilityChange: (visible) => {
+      if (visible && !response) {
+        submit();
+      }
+    },
+  });
+
   // Clean up on unmount
   useEffect(() => {
     return () => {
@@ -249,21 +261,23 @@ export function MetricWidget({
   const timeRange = response?.success ? response.data.timeRange : undefined;
 
   return (
-    <QueryWidget
-      title={title}
-      titleString={title}
-      query={props.query}
-      config={config}
-      isLoading={isLoading}
-      data={data}
-      timeRange={timeRange}
-      error={response?.success === false ? response.error : undefined}
-      isResizing={isResizing}
-      isDraggable={isDraggable}
-      onEdit={onEdit}
-      onRename={onRename}
-      onDelete={onDelete}
-      onDuplicate={onDuplicate}
-    />
+    <div ref={visibilityRef} className="h-full">
+      <QueryWidget
+        title={title}
+        titleString={title}
+        query={props.query}
+        config={config}
+        isLoading={isLoading}
+        data={data}
+        timeRange={timeRange}
+        error={response?.success === false ? response.error : undefined}
+        isResizing={isResizing}
+        isDraggable={isDraggable}
+        onEdit={onEdit}
+        onRename={onRename}
+        onDelete={onDelete}
+        onDuplicate={onDuplicate}
+      />
+    </div>
   );
 }