From a12aed723fd43ba1da6e23bdb3e9969f4c56de67 Mon Sep 17 00:00:00 2001
From: Ou <orongxing@gmail.com>
Date: Sun, 6 Oct 2024 01:20:59 +0800
Subject: [PATCH] feat: set timeout

---
 src/components/header.tsx       | 11 ++++++++++-
 src/components/section/card.tsx |  3 ++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index 68dbc0b..7b7e881 100644
--- a/src/components/header.tsx
+++ b/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} />
   )
 }
 
diff --git a/src/components/section/card.tsx b/src/components/section/card.tsx
index 8594afc..82382ff 100644
--- a/src/components/section/card.tsx
+++ b/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 {