debounce stats invalidation

zaknesler · May 23, 2024 · e724b73 · e724b73
1 parent 1ea839d
commit e724b73
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/ui/src/components/entry/entry-panel.tsx b/ui/src/components/entry/entry-panel.tsx
@@ -10,11 +10,13 @@ import { useFilterParams } from '~/hooks/use-filter-params';
 import { Empty } from '../ui/empty';
 import { useViewport } from '~/hooks/use-viewport';
 import { Spinner } from '../ui/spinner';
+import { useInvalidateStats } from '~/hooks/queries/use-invalidate-stats';
 
 export const EntryPanel = () => {
   const filter = useFilterParams();
   const queryClient = useQueryClient();
   const { gtBreakpoint } = useViewport();
+  const invalidateStats = useInvalidateStats();
 
   const entry = createQuery(() => ({
     enabled: !!filter.params.entry_uuid,
@@ -33,7 +35,7 @@ export const EntryPanel = () => {
     if (!entry.isSuccess || !entry.data || entry.data.read_at) return;
 
     markAsRead.mutateAsync(entry.data.uuid).then(() => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.FEEDS_STATS] });
+      invalidateStats();
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.ENTRIES_VIEW, entry.data.uuid] });
     });
   });

diff --git a/ui/src/components/modals/create-feed.tsx b/ui/src/components/modals/create-feed.tsx
@@ -21,7 +21,7 @@ export const CreateFeed: Component<CreateFeedProps> = props => {
   const navigate = useNavigate();
 
   const [open, setOpen] = createSignal(false);
-  const [value, setValue] = createSignal('https://blog.rust-lang.org/feed.xml');
+  const [value, setValue] = createSignal('');
   const [inputElement, setInputElement] = createSignal<HTMLDivElement>();
 
   const add = createMutation(() => ({
@@ -40,8 +40,9 @@ export const CreateFeed: Component<CreateFeedProps> = props => {
     const feed = await add.mutateAsync({ url: value() });
     queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.FEEDS] });
     navigate(`/feeds/${feed.uuid}`);
-    add.reset();
     setOpen(false);
+    add.reset();
+    setValue('');
   };
 
   const handleOpenAutoFocus = (event: Event) => {

diff --git a/ui/src/hooks/queries/use-invalidate-stats.ts b/ui/src/hooks/queries/use-invalidate-stats.ts
@@ -0,0 +1,20 @@
+import { debounce, leadingAndTrailing } from '@solid-primitives/scheduled';
+import { QUERY_KEYS } from '~/constants/query';
+import { useQueryClient } from '@tanstack/solid-query';
+
+const DEBOUNCE_MS = 500;
+
+/**
+ * Invalidate all stats.
+ */
+export const useInvalidateStats = () => {
+  const queryClient = useQueryClient();
+
+  return leadingAndTrailing(
+    debounce,
+    () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.FEEDS_STATS] });
+    },
+    DEBOUNCE_MS,
+  );
+};