refactor: replaced es-toolkit with tanstack-pacer

package.json

@@ -39,17 +39,21 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@tanstack/react-query": "^5.90.12",
+    "@tanstack/devtools-vite": "^0.4.1",
-    "@tanstack/react-query-devtools": "^5.91.1",
+    "@tanstack/react-devtools": "^0.9.2",
+    "@tanstack/react-pacer": "^0.19.3",
+    "@tanstack/react-pacer-devtools": "^0.5.2",
+    "@tanstack/react-query": "^5.90.17",
+    "@tanstack/react-query-devtools": "^5.91.2",
     "@tauri-apps/api": "^2.9.1",
     "@tauri-apps/plugin-clipboard-manager": "^2.3.2",
-    "@tauri-apps/plugin-dialog": "^2.4.2",
+    "@tauri-apps/plugin-dialog": "^2.6.0",
-    "@tauri-apps/plugin-fs": "^2.4.4",
+    "@tauri-apps/plugin-fs": "^2.4.5",
     "@tauri-apps/plugin-notification": "^2.3.3",
-    "@tauri-apps/plugin-opener": "^2.5.2",
+    "@tauri-apps/plugin-opener": "^2.5.3",
     "@tauri-apps/plugin-os": "^2.3.2",
     "@tauri-apps/plugin-process": "^2.3.1",
-    "@tauri-apps/plugin-shell": "^2.3.3",
+    "@tauri-apps/plugin-shell": "^2.3.4",
     "@tauri-apps/plugin-sql": "^2.3.1",
     "@tauri-apps/plugin-updater": "^2.9.0",
     "class-variance-authority": "^0.7.1",
@@ -57,36 +61,35 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
-    "es-toolkit": "^1.43.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.561.0",
+    "lucide-react": "^0.562.0",
     "next-themes": "^0.4.6",
     "react": "^19.2.3",
-    "react-day-picker": "^9.12.0",
+    "react-day-picker": "^9.13.0",
     "react-dom": "^19.2.3",
-    "react-hook-form": "^7.68.0",
+    "react-hook-form": "^7.71.1",
     "react-resizable-panels": "^3.0.6",
-    "react-router-dom": "^7.10.1",
+    "react-router-dom": "^7.12.0",
     "recharts": "^3.6.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "ulid": "^3.0.2",
     "vaul": "^1.1.2",
-    "zod": "^4.2.0",
+    "zod": "^4.3.5",
-    "zustand": "^5.0.9"
+    "zustand": "^5.0.10"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",
     "@tailwindcss/vite": "^4.1.18",
     "@tauri-apps/cli": "^2.9.6",
-    "@types/node": "^25.0.2",
+    "@types/node": "^25.0.8",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0",
     "typescript": "~5.9.3",
-    "vite": "^7.3.0"
+    "vite": "^7.3.1"
   }
 }

src-tauri/Cargo.toml

@@ -22,7 +22,7 @@ tauri-build = { version = "2", features = [] }
 tauri = { version = "2", features = ["tray-icon"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
-reqwest = { version = "0.12", features = ["json"] }
+reqwest = { version = "0.13", features = ["json"] }
 tokio = { version = "1", features = ["full"] }
 tokio-tungstenite = "*"
 sqlx = { version = "0.8", features = [ "sqlite", "runtime-tokio", "tls-native-tls" ] }

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 React from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { TanStackDevtools } from '@tanstack/react-devtools';
-import { ReactQueryDevtools } from '@tanstack/react-query-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>
     )
 }

vite.config.ts

@@ -2,13 +2,18 @@ import path from "path"
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
+import { devtools } from "@tanstack/devtools-vite";
 
 // @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
-  plugins: [react(), tailwindcss()],
+  plugins: [
+    devtools(),
+    react(),
+    tailwindcss()
+  ],
   build: {
     chunkSizeWarningLimit: 1024, // 1MB
   },