From 210b9ebf5634a9bca16231051f4c2b0ea2c778ea Mon Sep 17 00:00:00 2001
From: wellCh4n <wellch4n@foxmail.com>
Date: Thu, 22 May 2025 22:28:43 +0800
Subject: [PATCH] fix: GitHub stars count sync not working (#20126)

---
 .../components/header/github-star/index.tsx   | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/web/app/components/header/github-star/index.tsx b/web/app/components/header/github-star/index.tsx
index b087b9e41a..e825dcdd14 100644
--- a/web/app/components/header/github-star/index.tsx
+++ b/web/app/components/header/github-star/index.tsx
@@ -2,6 +2,11 @@
 import { useQuery } from '@tanstack/react-query'
 import type { FC } from 'react'
 import type { GithubRepo } from '@/models/common'
+import { RiLoader2Line } from '@remixicon/react'
+
+const defaultData = {
+  stargazers_count: 98570,
+}
 
 const getStar = async () => {
   const res = await fetch('https://api.github.com/repos/langgenius/dify')
@@ -13,15 +18,21 @@ const getStar = async () => {
 }
 
 const GithubStar: FC<{ className: string }> = (props) => {
-  const { isFetching, data } = useQuery<GithubRepo>({
+  const { isFetching, isError, data } = useQuery<GithubRepo>({
     queryKey: ['github-star'],
     queryFn: getStar,
     enabled: process.env.NODE_ENV !== 'development',
-    initialData: { stargazers_count: 81204 },
+    retry: false,
+    placeholderData: defaultData,
   })
+
   if (isFetching)
-    return null
-  return <span {...props}>{data.stargazers_count.toLocaleString()}</span>
+    return <RiLoader2Line className='size-3 shrink-0 animate-spin text-text-tertiary' />
+
+  if (isError)
+    return <span {...props}>{defaultData.stargazers_count.toLocaleString()}</span>
+
+  return <span {...props}>{data?.stargazers_count.toLocaleString()}</span>
 }
 
 export default GithubStar