Merge pull request #173 from kwnt-dev/refactor/#172_loading-ui

refactor: ローディング表示の統一

Author: kwnt-dev

app/admin/pdf-preview/page.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/lib/pinSession";
 import { PinResponse } from "@/types/api";
 import { toast } from "sonner";
+import { Loading } from "@/components/ui/Loading";
 
 const CARD_SIZE = 240;
 
@@ -307,7 +308,7 @@ function PDFPreviewContent() {
 
 export default function PDFPreviewPage() {
   return (
-    <Suspense fallback={<div className="p-8">読み込み中...</div>}>
+    <Suspense fallback={<Loading />}>
       <PDFPreviewContent />
     </Suspense>
   );

components/greens/GreenCanvas.tsx

@@ -32,6 +32,7 @@ import {
   ydToPx,
 } from "@/lib/greenCanvas.convert";
 import { useHoleData } from "@/hooks/useHoleData";
+import { Loading } from "@/components/ui/Loading";
 
 interface Props {
   hole: string;
@@ -201,7 +202,7 @@ export default function GreenCanvas({
   }, []);
 
   if (!holeData) {
-    return <div>読み込み中...</div>;
+    return <Loading />;
   }
 
   const config = HOLE_CONFIGS[hole.padStart(2, "0")];

components/greens/GreenCardPDF.tsx

@@ -14,6 +14,7 @@ import {
   ydToPx,
 } from "@/lib/greenCanvas.convert";
 import { useHoleData } from "@/hooks/useHoleData";
+import { Loading } from "@/components/ui/Loading";
 
 interface Props {
   hole: string;
@@ -29,7 +30,7 @@ export default function GreenCardPDF({ hole, currentPin }: Props) {
   const holeData = useHoleData(hole);
 
   if (!holeData) {
-    return <div>読み込み中...</div>;
+    return <Loading />;
   }
 
   const scale = CARD_SIZE / CANVAS_SIZE;

components/greens/GreenCardPDFExport.tsx

@@ -13,6 +13,7 @@ import {
   ydToPx,
 } from "@/lib/greenCanvas.convert";
 import { useHoleData } from "@/hooks/useHoleData";
+import { Loading } from "@/components/ui/Loading";
 
 interface Props {
   hole: string;
@@ -52,7 +53,7 @@ export default function GreenCardPDFExport({
   const holeData = useHoleData(hole);
 
   if (!holeData) {
-    return <div>読み込み中...</div>;
+    return <Loading />;
   }
 
   const scale = width / CANVAS_SIZE;

components/ui/Loading.tsx

@@ -0,0 +1,7 @@
+export function Loading() {
+  return (
+    <div className="flex items-center justify-center p-8 text-sm text-muted-foreground">
+      読み込み中...
+    </div>
+  );
+}