From 8cc1944160d0b89e1f8de7ef99da20f8778166d1 Mon Sep 17 00:00:00 2001
From: KVOJJJin <jzongcode@gmail.com>
Date: Thu, 18 Apr 2024 11:54:54 +0800
Subject: [PATCH] Fix: use debounce for switch (#3585)

---
 web/app/components/datasets/documents/list.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/app/components/datasets/documents/list.tsx b/web/app/components/datasets/documents/list.tsx
index 4dcd247471e217..d83e6a4beaf6d2 100644
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -2,6 +2,7 @@
 'use client'
 import type { FC, SVGProps } from 'react'
 import React, { useEffect, useState } from 'react'
+import { useDebounceFn } from 'ahooks'
 import { ArrowDownIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { ExclamationCircleIcon } from '@heroicons/react/24/solid'
 import dayjs from 'dayjs'
@@ -154,6 +155,14 @@ export const OperationAction: FC<{
     onUpdate(operationName)
   }
 
+  const { run: handleSwitch } = useDebounceFn((operationName: OperationName) => {
+    if (operationName === 'enable' && enabled)
+      return
+    if (operationName === 'disable' && !enabled)
+      return
+    onOperate(operationName)
+  }, { wait: 500 })
+
   return <div className='flex items-center' onClick={e => e.stopPropagation()}>
     {isListScene && !embeddingAvailable && (
       <Switch defaultValue={false} onChange={() => { }} disabled={true} size='md' />
@@ -166,7 +175,7 @@ export const OperationAction: FC<{
               <Switch defaultValue={false} onChange={() => { }} disabled={true} size='md' />
             </div>
           </Tooltip>
-          : <Switch defaultValue={enabled} onChange={v => onOperate(v ? 'enable' : 'disable')} size='md' />
+          : <Switch defaultValue={enabled} onChange={v => handleSwitch(v ? 'enable' : 'disable')} size='md' />
         }
         <Divider className='!ml-4 !mr-2 !h-3' type='vertical' />
       </>
@@ -189,7 +198,7 @@ export const OperationAction: FC<{
                   <div>
                     <Switch
                       defaultValue={archived ? false : enabled}
-                      onChange={v => !archived && onOperate(v ? 'enable' : 'disable')}
+                      onChange={v => !archived && handleSwitch(v ? 'enable' : 'disable')}
                       disabled={archived}
                       size='md'
                     />