Debounce filter value updates

app/src/components/requestLogs/LogFilters/LogFilter.tsx

@@ -1,9 +1,11 @@
+import { useCallback, useState } from "react";
 import { HStack, IconButton, Input, Select } from "@chakra-ui/react";
 import { BsTrash } from "react-icons/bs";
 
 import { type LogFilter, comparators } from "~/state/logFiltersSlice";
 import { useAppStore } from "~/state/store";
 import { useFilterableFields } from "~/utils/hooks";
+import { debounce } from "lodash-es";
 
 const LogFilter = ({ filter, index }: { filter: LogFilter; index: number }) => {
   const filterableFields = useFilterableFields();
@@ -13,6 +15,20 @@ const LogFilter = ({ filter, index }: { filter: LogFilter; index: number }) => {
 
   const { field, comparator, value } = filter;
 
+  const [editedValue, setEditedValue] = useState("");
+
+  const debouncedUpdateFilter = useCallback(
+    debounce(
+      (index: number, filter: LogFilter) => {
+        console.log("updating filter!!!");
+        updateFilter(index, filter);
+      },
+      200,
+      { leading: true },
+    ),
+    [updateFilter],
+  );
+
   return (
     <HStack>
       <Select
@@ -41,8 +57,11 @@ const LogFilter = ({ filter, index }: { filter: LogFilter; index: number }) => {
         ))}
       </Select>
       <Input
-        value={value}
-        onChange={(e) => updateFilter(index, { ...filter, value: e.target.value })}
+        value={editedValue}
+        onChange={(e) => {
+          setEditedValue(e.target.value);
+          debouncedUpdateFilter(index, { ...filter, value: e.target.value });
+        }}
       />
       <IconButton
         aria-label="Delete Filter"

app/src/components/requestLogs/LoggedCallsTable.tsx

@@ -1,11 +1,20 @@
 import { Card, Table, Tbody } from "@chakra-ui/react";
-import { useState } from "react";
+import { useState, useEffect } 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: loggedCalls } = useLoggedCalls();
+  const { data, isLoading } = useLoggedCalls();
+
+  const [loggedCalls, setLoggedCalls] = useState(data);
+
+  useEffect(() => {
+    // persist data while loading
+    if (!isLoading) {
+      setLoggedCalls(data);
+    }
+  }, [data, isLoading]);
 
   return (
     <Card width="100%" overflow="hidden">

app/src/server/api/routers/externalApi.router.ts

@@ -186,6 +186,7 @@ export const externalApiRouter = createTRPCRouter({
       ]);
 
       const tagsToCreate = Object.entries(input.tags ?? {}).map(([name, value]) => ({
+        projectId: key.projectId,
         loggedCallId: newLoggedCallId,
         // sanitize tags
         name: name.replaceAll(/[^a-zA-Z0-9_]/g, "_"),