chore: add debounce for translate word

components/Word.tsx

@@ -3,6 +3,7 @@ import { useDisclosure } from '@mantine/hooks'
 
 import TranslateWordPopup from './TranslateWordPopup'
 
+import useDebounce from '@/hooks/useDebounce'
 import { clearWord } from 'utils/clearWord'
 
 interface WordProps {
@@ -12,7 +13,7 @@ interface WordProps {
 function Word(props: WordProps) {
 	const [opened, { close, open }] = useDisclosure(false)
 
-	return (
+	return useDebounce(
 		<Popover
 			width={200}
 			position="top-start"
@@ -27,7 +28,8 @@ function Word(props: WordProps) {
 					</Popover.Dropdown>
 				</Text>
 			</Popover.Target>
-		</Popover>
+		</Popover>,
+		300,
 	)
 }
 

hooks/useDebounce.ts

@@ -0,0 +1,12 @@
+import { useState, useEffect } from 'react'
+
+export default function useDebounce<T>(value: T, delay: number): T {
+	const [debouncedValue, setDebouncedValue] = useState(value)
+
+	useEffect(() => {
+		const handler = setTimeout(() => setDebouncedValue(value), delay)
+		return () => clearTimeout(handler)
+	}, [delay, value])
+
+	return debouncedValue
+}