[Fix] Loading animation

src/components/Community/index.tsx

@@ -1,4 +1,4 @@
 import React, { type FC, useEffect, useState, useMemo } from "react";
 import SlotCounter from "react-slot-counter";
 import "./LandingCommunity.css";
 import { useCommunityStatsContext } from "@site/src/lib/statsProvider";
@@ -17,8 +17,6 @@
     githubContributorsCount,
     githubForksCount,
     githubReposCount,
-    loading,
-    error,
   } = useCommunityStatsContext();
 
   const generateList = useMemo(
@@ -84,19 +82,14 @@
           </span>
           .
         </h2>
-        {error && (
-          <div className="landing-community__error">
-            <small>⚠️ Stats may be cached or incomplete</small>
-          </div>
-        )}
       </div>
 
       <div className="landing-community__content">
         <div className="landing-community__stats">
           {generateList.map((item, index) => (
             <div
               key={index}
-              className={`landing-community__stat-item ${item.href ? "clickable" : ""} ${loading ? "loading" : ""}`}
+              className={`landing-community__stat-item ${item.href ? "clickable" : ""}`}
               onClick={() => handleCardClick(item.href)}
               role={item.href ? "button" : "presentation"}
               tabIndex={item.href ? 0 : -1}
@@ -109,27 +102,19 @@
               title={item.href ? `Click to visit ${item.label}` : item.label}
             >
               <div className="landing-community__stat-value">
-                {loading ? (
-                  <div className="landing-community__loading">
-                    <span className="loading-spinner">⏳</span>
-                  </div>
-                ) : (
-                  <span>
-                    <SlotCounter
-                      value={item.stat}
-                      duration={2}
-                      animateOnVisible={{
-                        triggerOnce: true,
-                        rootMargin: "0px 0px -100px 0px",
-                      }}
-                      numberSlotClassName="slot-counter-number"
-                      separatorClassName="slot-counter-separator"
-                    />
-                    {item.href && (
-                      <span className="external-link-icon">↗</span>
-                    )}
-                  </span>
-                )}
+                <span>
+                  <SlotCounter
+                    value={item.stat}
+                    duration={2}
+                    animateOnVisible={{
+                      triggerOnce: true,
+                      rootMargin: "0px 0px -100px 0px",
+                    }}
+                    numberSlotClassName="slot-counter-number"
+                    separatorClassName="slot-counter-separator"
+                  />
+                  {item.href && <span className="external-link-icon">↗</span>}
+                </span>
               </div>
               <div className="landing-community__stat-description">
                 {item.description}

src/lib/statsProvider.tsx

@@ -1,12 +1,11 @@
-/** @jsxImportSource react */
 import React, {
   createContext,
   useCallback,
   useContext,
   useEffect,
   useMemo,
   useState,
-  ReactNode,
+  type ReactNode,
 } from "react";
 import { githubService, type GitHubOrgStats } from "../services/githubService";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
@@ -166,12 +165,12 @@ export function CommunityStatsProvider({
   } = useDocusaurusContext();
   const token = customFields?.gitToken || "";
 
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false); // Start with false to avoid hourglass
   const [error, setError] = useState<string | null>(null);
-  const [githubStarCount, setGithubStarCount] = useState(0);
-  const [githubContributorsCount, setGithubContributorsCount] = useState(0);
-  const [githubForksCount, setGithubForksCount] = useState(0);
-  const [githubReposCount, setGithubReposCount] = useState(0);
+  const [githubStarCount, setGithubStarCount] = useState(984); // Placeholder value - updated to match production
+  const [githubContributorsCount, setGithubContributorsCount] = useState(467); // Placeholder value - updated to match production
+  const [githubForksCount, setGithubForksCount] = useState(1107); // Placeholder value - updated to match production
+  const [githubReposCount, setGithubReposCount] = useState(10); // Placeholder value - updated to match production
   const [githubDiscussionsCount, setGithubDiscussionsCount] = useState(0);
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
 
@@ -412,17 +411,28 @@ export function CommunityStatsProvider({
 
   const fetchAllStats = useCallback(
     async (signal: AbortSignal) => {
-      setLoading(true);
-      setError(null);
-
-      // Check cache first
+      // Check cache first and load it immediately without showing loading state
       const now = Date.now();
-      if (cache.data && now - cache.timestamp < CACHE_DURATION) {
+      const isCacheValid = cache.data && now - cache.timestamp < CACHE_DURATION;
+
+      if (isCacheValid) {
+        // Use cached data immediately
         setAllContributors(cache.data.contributors);
         setLoading(false);
         return;
       }
 
+      // If cache is expired or empty, show cached data anyway but fetch fresh data
+      // This provides immediate content while updating in the background
+      if (cache.data) {
+        setAllContributors(cache.data.contributors);
+        setLoading(false); // Don't show loading state for background refresh
+      } else {
+        setLoading(true); // Only show loading on first load
+      }
+
+      setError(null);
+
       if (!token) {
         setError(
           "GitHub token not found. Please set customFields.gitToken in docusaurus.config.js.",