Prevent logged calls table flashes

app/src/components/requestLogs/LoggedCallsTable.tsx

@@ -1,20 +1,11 @@
 import { Card, Table, Tbody } from "@chakra-ui/react";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useLoggedCalls } from "~/utils/hooks";
 import { TableHeader, TableRow } from "./TableRow";
 
 export default function LoggedCallsTable() {
   const [expandedRow, setExpandedRow] = useState<string | null>(null);
-  const { data, isLoading } = useLoggedCalls();
-
-  const [loggedCalls, setLoggedCalls] = useState(data);
-
-  useEffect(() => {
-    // persist data while loading
-    if (!isLoading) {
-      setLoggedCalls(data);
-    }
-  }, [data, isLoading]);
+  const loggedCalls = useLoggedCalls().data;
 
   return (
     <Card width="100%" overflow="hidden">

app/src/utils/hooks.ts

@@ -181,10 +181,21 @@ export const useLoggedCalls = () => {
   const { page, pageSize } = usePageParams();
   const filters = useAppStore((state) => state.logFilters.filters);
 
-  return api.loggedCalls.list.useQuery(
+  const { data, isLoading, ...rest } = api.loggedCalls.list.useQuery(
     { projectId: selectedProjectId ?? "", page, pageSize, filters },
     { enabled: !!selectedProjectId },
   );
+
+  const [stableData, setStableData] = useState(data);
+
+  useEffect(() => {
+    // Prevent annoying flashes while logs are loading from the server
+    if (!isLoading) {
+      setStableData(data);
+    }
+  }, [data, isLoading]);
+
+  return { data: stableData, isLoading, ...rest };
 };
 
 export const useTagNames = () => {