refactor: replaced es-toolkit with tanstack-pacer

src/components/pages/settings/applicationSettings.tsx

@@ -1281,13 +1281,13 @@ function AppInfoSettings() {
     const libDepsList = [
         { key: 'shadcn-ui', name: 'shadcn/ui', desc: 'Beautifully designed components built with Radix UI and Tailwind CSS', url: 'https://ui.shadcn.com/', license: 'MIT', licenseUrl: 'https://github.com/shadcn-ui/ui/blob/main/LICENSE.md' },
         { key: 'lucide-icons', name: 'Lucide Icons', desc: 'A simple and consistent icon system for web applications', url: 'https://lucide.dev/', license: 'ISC', licenseUrl: 'https://github.com/lucide-icons/lucide/blob/main/LICENSE' },
-        { key: 'tanstack-react-query', name: 'TanStack React Query', desc: 'Powerful asynchronous state management tool', url: 'https://tanstack.com/query/latest', license: 'MIT', licenseUrl: 'https://github.com/TanStack/query/blob/main/LICENSE' },
+        { key: 'tanstack-react-query', name: 'TanStack React Query', desc: 'Powerful asynchronous state management, server-state utilities and data fetching', url: 'https://tanstack.com/query/latest', license: 'MIT', licenseUrl: 'https://github.com/TanStack/query/blob/main/LICENSE' },
+        { key: 'tanstack-react-pacer' , name: 'TanStack React Pacer', desc: 'Framework agnostic debouncing, throttling, rate limiting, queuing, and batching utilities', url: 'https://tanstack.com/pacer/latest', license: 'MIT', licenseUrl: 'https://github.com/TanStack/pacer/blob/main/LICENSE' },
         { key: 'zustand', name: 'Zustand', desc: 'A small, fast and scalable bearbones state-management solution', url: 'https://zustand-demo.pmnd.rs/', license: 'MIT', licenseUrl: 'https://github.com/pmndrs/zustand/blob/main/LICENSE' },
         { key: 'zod', name: 'Zod', desc: 'TypeScript-first schema declaration and validation library', url: 'https://zod.dev/', license: 'MIT', licenseUrl: 'https://github.com/colinhacks/zod/blob/main/LICENSE' },
         { key: 'react-router', name: 'React Router', desc: 'Declarative routing for React applications', url: 'https://reactrouter.com/', license: 'MIT', licenseUrl: 'https://github.com/remix-run/react-router/blob/main/LICENSE.md' },
         { key: 'react-hook-form', name: 'React Hook Form', desc: 'Performant, flexible and extensible forms with easy-to-use validation', url: 'https://react-hook-form.com/', license: 'MIT', licenseUrl: 'https://github.com/react-hook-form/react-hook-form/blob/master/LICENSE' },
         { key: 'sonner', name: 'Sonner', desc: 'A beautiful, simple and customizable notification library for React', url: 'https://sonner.emilkowal.ski/', license: 'MIT', licenseUrl: 'https://github.com/emilkowalski/sonner/blob/main/LICENSE.md' },
-        { key: 'es-toolkit' , name: 'ES Toolkit', desc: 'State-of-the-art JavaScript utility library', url: 'https://es-toolkit.dev/', license: 'MIT', licenseUrl: 'https://github.com/toss/es-toolkit/blob/main/LICENSE' },
         { key: 'tokio', name: 'Tokio', desc: 'An asynchronous runtime for the Rust programming language', url: 'https://tokio.rs/', license: 'MIT', licenseUrl: 'https://github.com/tokio-rs/tokio/blob/master/LICENSE' },
         { key: 'reqwest', name: 'Reqwest', desc: 'An easy and powerful HTTP Client for Rust', url: 'https://crates.io/crates/reqwest', license: 'MIT, Apache-2.0', licenseUrl: 'https://github.com/seanmonstar/reqwest/blob/master/LICENSE-APACHE' },
         { key: 'serde', name: 'Serde', desc: 'A framework for serializing and deserializing Rust data structures', url: 'https://serde.rs/', license: 'MIT, Apache-2.0', licenseUrl: 'https://github.com/serde-rs/serde/blob/master/LICENSE-MIT' },

src/helpers/use-downloader.ts

@@ -13,7 +13,7 @@ import { useLogger } from "@/helpers/use-logger";
 import { ulid } from "ulid";
 import { sendNotification } from '@tauri-apps/plugin-notification';
 import { FetchVideoMetadataParams, StartDownloadParams } from "@/providers/appContextProvider";
-import { debounce } from "es-toolkit";
+import { useDebouncedCallback } from '@tanstack/react-pacer/debouncer';
 
 export default function useDownloader() {
     const globalDownloadStates = useDownloadStatesStore((state) => state.downloadStates);
@@ -87,7 +87,7 @@ export default function useDownloader() {
     const isProcessingQueueRef = useRef(false);
     const lastProcessedDownloadIdRef = useRef<string | null>(null);
 
-    const updateDownloadState = debounce((state: DownloadState) => {
+    const updateDownloadProgress =  useDebouncedCallback((state: DownloadState) => {
         downloadStateSaver.mutate(state, {
             onSuccess: (_data) => {
                 // console.log("Download State saved successfully:", data);
@@ -97,7 +97,7 @@ export default function useDownloader() {
                 console.error("Failed to save download state:", error);
             }
         });
-    }, 500);
+    }, { key: 'update-download-progress', wait: 500 });
 
     const fetchVideoMetadata = async (params: FetchVideoMetadataParams): Promise<RawVideoInfo | null> => {
         const { url, formatId, playlistIndices, selectedSubtitles, resumeState, downloadConfig } = params;
@@ -540,7 +540,7 @@ export default function useDownloader() {
                     custom_command: customCommandArgs,
                     queue_config: null
                 };
-                updateDownloadState(state);
+                updateDownloadProgress(state);
             } else {
                 // console.log(line);
                 if (line.trim() !== '') LOG.info(`YT-DLP Download ${downloadId}`, line);
@@ -791,7 +791,7 @@ export default function useDownloader() {
                             reject(error);
                         }
                     });
-                }, 500);
+                }, 1500);
             });
         } catch (e) {
             console.error(`Failed to pause download: ${e}`);
@@ -857,7 +857,7 @@ export default function useDownloader() {
                             reject(error);
                         }
                     });
-                }, 500);
+                }, 1500);
             });
         } catch (e) {
             console.error(`Failed to cancel download: ${e}`);

src/providers/tanstackProvider.tsx

@@ -1,6 +1,8 @@
-import React from 'react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import React from 'react';
+import { TanStackDevtools } from '@tanstack/react-devtools';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
+import { PacerDevtoolsPanel } from '@tanstack/react-pacer-devtools';
 
 const TanstackProvider = ({children}: {children: React.ReactNode}) => {
     const queryClient = new QueryClient({
@@ -13,10 +15,27 @@ const TanstackProvider = ({children}: {children: React.ReactNode}) => {
             }
         }
     });
+
     return (
         <QueryClientProvider client={queryClient}>
             {children}
-            <ReactQueryDevtools initialIsOpen={false} />
+            <TanStackDevtools
+                eventBusConfig={{
+                    debug: false,
+                }}
+                plugins={[
+                    {
+                        name: 'TanStack Query',
+                        render: <ReactQueryDevtoolsPanel />,
+                        defaultOpen: true
+                    },
+                    {
+                        name: 'TanStack Pacer',
+                        render: <PacerDevtoolsPanel />,
+                        defaultOpen: false
+                    },
+                ]}
+            />
         </QueryClientProvider>
     )
 }