feat: add SpinningIcon component and use it globally

Author: elvisdragonmao

src/features/form/components/AdminFormDetailPage.module.css

@@ -30,21 +30,6 @@
 	color: var(--comment);
 	font-size: 0.9rem;
 }
-
-.spinningIcon {
-	animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-	from {
-		transform: rotate(0deg);
-	}
-
-	to {
-		transform: rotate(360deg);
-	}
-}
-
 .tabs {
 	display: flex;
 	gap: 1rem;

src/features/form/components/AdminFormDetailPage.tsx

@@ -3,7 +3,7 @@ import { useFormById, usePublishForm } from "@/features/form/hooks/useOrgForms";
 import { AdminLayout } from "@/layouts";
 import { SEO_CONFIG } from "@/seo/seo.config";
 import { useSeo } from "@/seo/useSeo";
-import { Button, ErrorMessage, LoadingSpinner, useToast } from "@/shared/components";
+import { Button, ErrorMessage, LoadingSpinner, SpinningIcon, useToast } from "@/shared/components";
 import { useIsMutating } from "@tanstack/react-query";
 import { Check, Link, LoaderCircle } from "lucide-react";
 import { useState } from "react";
@@ -99,7 +99,7 @@ export const AdminFormDetailPage = () => {
 					<h1 className={styles.title}>{formQuery.data.title}</h1>
 					<div className={styles.headerActions}>
 						<div className={styles.saveStatus} aria-live="polite">
-							{isSaving ? <LoaderCircle size={16} className={styles.spinningIcon} /> : <Check size={16} />}
+							{isSaving ? <SpinningIcon icon={LoaderCircle} size={16} /> : <Check size={16} />}
 							<span>{isSaving ? "儲存中" : "已儲存"}</span>
 						</div>
 						<Button onClick={handlePublish} disabled={publishFormMutation.isPending || formQuery.data.status !== "DRAFT"}>

src/features/form/components/FormDetail/components/FormHeader/FormHeader.module.css

@@ -18,20 +18,6 @@
 	color: var(--comment);
 	font-size: 0.9rem;
 }
-
-.spinningIcon {
-	animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-
 .title {
 	margin-bottom: 1.5rem;
 	text-align: center;

src/features/form/components/FormDetail/components/FormHeader/FormHeader.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/shared/components";
+import { Button, SpinningIcon } from "@/shared/components";
 import { AlertCircle, Check, ChevronLeft, LoaderCircle } from "lucide-react";
 import styles from "./FormHeader.module.css";
 
@@ -26,7 +26,7 @@ export const FormHeader = ({ title, formDescription, currentStep, currentSection
 						<div className={styles.saveStatus} aria-live="polite">
 							{saveStatus === "saving" ? (
 								<>
-									<LoaderCircle size={16} className={styles.spinningIcon} />
+									<SpinningIcon icon={LoaderCircle} size={16} />
 									<span>儲存中</span>
 								</>
 							) : saveStatus === "error" ? (

src/shared/components/SpinningIcon/SpinningIcon.module.css

@@ -0,0 +1,13 @@
+.spinningIcon {
+	animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}

src/shared/components/SpinningIcon/SpinningIcon.tsx

@@ -0,0 +1,11 @@
+import { type LucideProps } from "lucide-react";
+import styles from "./SpinningIcon.module.css";
+
+interface SpinningIconProps {
+	icon: React.ComponentType<LucideProps>;
+	size?: number;
+}
+
+export const SpinningIcon = ({ icon: Icon, size = 16 }: SpinningIconProps) => {
+	return <Icon size={size} className={styles.spinningIcon} />;
+};

src/shared/components/index.ts

@@ -75,6 +75,8 @@ export { ErrorMessage } from "./ErrorMessage/ErrorMessage";
 
 export { LoadingSpinner } from "./LoadingSpinner/LoadingSpinner";
 
+export { SpinningIcon } from "./SpinningIcon/SpinningIcon";
+
 export { ErrorBoundary } from "./ErrorBoundary/ErrorBoundary";
 
 export { Markdown } from "./Markdown/Markdown";