feat: set timeout

src/components/header.tsx

@@ -1,6 +1,9 @@
 import { Link } from "@tanstack/react-router"
 import { useCallback } from "react"
 import { useAtomValue, useSetAtom } from "jotai"
+import { useIsFetching } from "@tanstack/react-query"
+import clsx from "clsx"
+import type { SourceID } from "@shared/types"
 import logo from "~/assets/react.svg"
 import { useDark } from "~/hooks/useDark"
 import { currentSectionAtom, refetchSourcesAtom } from "~/atoms"
@@ -28,8 +31,14 @@ function RefreshButton() {
     }))
   }, [currentSection, setRefetchSource])
 
+  const isFetching = useIsFetching({
+    predicate: (query) => {
+      return currentSection.sourceList.includes(query.queryKey[0] as SourceID)
+    },
+  })
+
   return (
-    <button type="button" className="i-ph:arrow-clockwise btn-pure" onClick={refreshAll} />
+    <button type="button" className={clsx("btn-pure i-ph:arrow-clockwise", isFetching && "animate-spin")} onClick={refreshAll} />
   )
 }
 

src/components/section/card.tsx

@@ -8,6 +8,7 @@ import { useAtom } from "jotai"
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react"
 import { sources } from "@shared/data"
 import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities"
+import { ofetch } from "ofetch"
 import { focusSourcesAtom, refetchSourcesAtom } from "~/atoms"
 import { useRelativeTime } from "~/hooks/useRelativeTime"
 
@@ -71,7 +72,7 @@ export function NewsCard({ id, inView, isOverlay, handleListeners }: NewsCardPro
       if (Date.now() - _refetchTime < 1000) {
         url = `/api/${_id}?latest`
       }
-      const response: SourceResponse = await fetch(url).then(res => res.json())
+      const response: SourceResponse = await ofetch(url, { timeout: 5000 })
       if (response.status === "error") {
         throw new Error(response.message)
       } else {