refactor(ui): clean code

ui/src/pages/dashboard/Dashboard.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback, useEffect, useState } from "react";
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { useRequest } from "ahooks";
 import { Card, Col, Divider, notification, Row, Space, Statistic, theme, Typography } from "antd";
 import { PageHeader } from "@ant-design/pro-components";
 import {
@@ -25,8 +26,6 @@ const Dashboard = () => {
 
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
 
-  const [loading, setLoading] = useState<boolean>(false);
-
   const statisticsGridSpans = {
     xs: { flex: "50%" },
     md: { flex: "50%" },
@@ -34,31 +33,26 @@ const Dashboard = () => {
     xl: { flex: "33.3333%" },
     xxl: { flex: "20%" },
   };
-
   const [statistics, setStatistics] = useState<Statistics>();
 
-  const fetchStatistics = useCallback(async () => {
-    if (loading) return;
-    setLoading(true);
+  const { loading } = useRequest(
+    () => {
+      return getStatistics();
+    },
+    {
+      onSuccess: (data) => {
+        setStatistics(data);
+      },
+      onError: (err) => {
+        if (err instanceof ClientResponseError && err.isAbort) {
+          return;
+        }
 
-    try {
-      const data = await getStatistics();
-      setStatistics(data);
-    } catch (err) {
-      if (err instanceof ClientResponseError && err.isAbort) {
-        return;
-      }
-
-      console.error(err);
-      notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
-    } finally {
-      setLoading(false);
+        console.error(err);
+        notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+      },
     }
-  }, []);
-
-  useEffect(() => {
-    fetchStatistics();
-  }, []);
+  );
 
   return (
     <>
@@ -71,6 +65,7 @@ const Dashboard = () => {
           <StatisticCard
             icon={<SquareSigmaIcon size={48} strokeWidth={1} color={themeToken.colorInfo} />}
             label={t("dashboard.statistics.all_certificates")}
+            loading={loading}
             value={statistics?.certificateTotal ?? "-"}
             suffix={t("dashboard.statistics.unit")}
             onClick={() => navigate("/certificates")}
@@ -80,6 +75,7 @@ const Dashboard = () => {
           <StatisticCard
             icon={<CalendarClockIcon size={48} strokeWidth={1} color={themeToken.colorWarning} />}
             label={t("dashboard.statistics.expire_soon_certificates")}
+            loading={loading}
             value={statistics?.certificateExpireSoon ?? "-"}
             suffix={t("dashboard.statistics.unit")}
             onClick={() => navigate("/certificates?state=expireSoon")}
@@ -89,6 +85,7 @@ const Dashboard = () => {
           <StatisticCard
             icon={<CalendarX2Icon size={48} strokeWidth={1} color={themeToken.colorError} />}
             label={t("dashboard.statistics.expired_certificates")}
+            loading={loading}
             value={statistics?.certificateExpired ?? "-"}
             suffix={t("dashboard.statistics.unit")}
             onClick={() => navigate("/certificates?state=expired")}
@@ -98,6 +95,7 @@ const Dashboard = () => {
           <StatisticCard
             icon={<WorkflowIcon size={48} strokeWidth={1} color={themeToken.colorInfo} />}
             label={t("dashboard.statistics.all_workflows")}
+            loading={loading}
             value={statistics?.workflowTotal ?? "-"}
             suffix={t("dashboard.statistics.unit")}
             onClick={() => navigate("/workflows")}
@@ -107,6 +105,7 @@ const Dashboard = () => {
           <StatisticCard
             icon={<FolderCheckIcon size={48} strokeWidth={1} color={themeToken.colorSuccess} />}
             label={t("dashboard.statistics.enabled_workflows")}
+            loading={loading}
             value={statistics?.workflowEnabled ?? "-"}
             suffix={t("dashboard.statistics.unit")}
             onClick={() => navigate("/workflows?state=enabled")}
@@ -123,19 +122,21 @@ const Dashboard = () => {
 
 const StatisticCard = ({
   label,
+  loading,
   icon,
   value,
   suffix,
   onClick,
 }: {
   label: React.ReactNode;
+  loading?: boolean;
   icon: React.ReactNode;
   value?: string | number | React.ReactNode;
   suffix?: React.ReactNode;
   onClick?: () => void;
 }) => {
   return (
-    <Card className="size-full overflow-hidden" bordered={false} hoverable onClick={onClick}>
+    <Card className="size-full overflow-hidden" bordered={false} hoverable loading={loading} onClick={onClick}>
       <Space size="middle">
         {icon}
         <Statistic