管理アプリでAPI からデータが返ってくるまで画面にロード中を示すスピナーを表示

samples/web-csr/dressca-frontend/admin/src/components/common/LoadingSpinnerOverlay.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+/**
+ * 画面全体を覆うオーバーレイを含むローディングスピナーコンポーネントです。
+ * スピナーを表示する親コンポーネントで任意の画像やスピナーアニメーションを指定することで、スピナーをカスタマイズできます。
+ * デフォルトでは灰色のローディングスピナーが表示されます。
+ */
+defineProps<{
+  show: boolean;
+}>();
+</script>
+
+<template>
+  <div v-if="show" class="overlay">
+    <div class="spinner-container">
+      <slot>
+        <div class="default-spinner"></div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.overlay {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: 50;
+  overflow: hidden;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.default-spinner {
+  height: 56px;
+  width: 56px;
+  border: 4px solid #b0b0b0;
+  border-top-color: #e0e0e0;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue

@@ -125,7 +125,6 @@ onMounted(async () => {
     body="カタログアイテムを追加しました。"
     @close="closeAddNotice"
   ></NotificationModal>
-
   <div
     class="container mx-auto flex flex-col items-center justify-center gap-6"
   >

samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue

@@ -26,6 +26,7 @@ import type {
 import { useCustomErrorHandler } from '@/shared/error-handler/use-custom-error-handler';
 import { useAuthenticationStore } from '@/stores/authentication/authentication';
 import { Roles } from '@/shared/constants/roles';
+import LoadingSpinner from '@/components/common/LoadingSpinnerOverlay.vue';
 
 const customErrorHandler = useCustomErrorHandler();
 const authenticationStore = useAuthenticationStore();
@@ -126,6 +127,11 @@ const showUpdateConfirm = ref(false);
  */
 const showUpdateNotice = ref(false);
 
+/**
+ * ローディングスピナーの表示の状態です。
+ */
+const showLoading = ref(true);
+
 /**
  * 削除通知モーダルを閉じます。
  * 表示する編集対象のアイテムがなくなるので、
@@ -227,7 +233,9 @@ const reFetchItemAndInitRowVersionAsync = async (itemId: number) => {
  *
  */
 onMounted(async () => {
+  showLoading.value = true;
   await initItemAsync(id);
+  showLoading.value = false;
 });
 
 /**
@@ -333,7 +341,9 @@ const updateItemAsync = async () => {
     @close="closeUpdateNotice"
   ></NotificationModal>
 
-  <div class="container mx-auto gap-6">
+  <LoadingSpinner :show="showLoading"></LoadingSpinner>
+
+  <div v-if="!showLoading" class="container mx-auto gap-6">
     <div>
       <div class="flex items-center justify-center p-8 text-5xl font-bold">
         カタログアイテム編集

samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsView.vue

@@ -9,6 +9,7 @@ import { currencyHelper } from '@/shared/helpers/currencyHelper';
 import { assetHelper } from '@/shared/helpers/assetHelper';
 import { useCustomErrorHandler } from '@/shared/error-handler/use-custom-error-handler';
 import { showToast } from '@/services/notification/notificationService';
+import LoadingSpinner from '@/components/common/LoadingSpinnerOverlay.vue';
 import type {
   GetCatalogBrandsResponse,
   GetCatalogCategoriesResponse,
@@ -57,6 +58,11 @@ const catalogCategories = ref<GetCatalogCategoriesResponse[]>([
   { id: 0, name: '' },
 ]);
 
+/**
+ * ローディングスピナーの表示の状態です。
+ */
+const showLoading = ref(true);
+
 /**
  * カタログブランドの名前を取得します。
  * @param id カタログブランドID
@@ -80,6 +86,7 @@ const getCategoryName = (id: number) => {
  * それぞれの状態を更新します。
  */
 onMounted(async () => {
+  showLoading.value = true;
   try {
     pagedListOfCatalogItem.value = await fetchItems(0, 0);
     [catalogCategories.value, catalogBrands.value] =
@@ -88,6 +95,8 @@ onMounted(async () => {
     customErrorHandler.handle(error, () => {
       showToast('カタログアイテムの取得に失敗しました。');
     });
+  } finally {
+    showLoading.value = false;
   }
 });
 
@@ -109,63 +118,66 @@ const goToEditItem = (id: number) => {
 
 <template>
   <div class="container mx-auto gap-6">
-    <div class="flex justify-center p-8 text-5xl font-bold">
-      カタログアイテム一覧
-    </div>
-    <div class="mx-2 my-8 flex justify-end">
-      <button
-        type="button"
-        class="rounded bg-green-600 px-4 py-2 text-xl font-bold text-white hover:bg-green-800"
-        @click="goToAddItem"
-      >
-        アイテム追加
-      </button>
+    <LoadingSpinner :show="showLoading"></LoadingSpinner>
+    <div v-if="!showLoading">
+      <div class="flex justify-center p-8 text-5xl font-bold">
+        カタログアイテム一覧
+      </div>
+      <div class="mx-2 my-8 flex justify-end">
+        <button
+          type="button"
+          class="rounded bg-green-600 px-4 py-2 text-xl font-bold text-white hover:bg-green-800"
+          @click="goToAddItem"
+        >
+          アイテム追加
+        </button>
+      </div>
+      <table class="table-auto border-separate text-xl">
+        <thead class="bg-blue-50">
+          <tr>
+            <th class="w-20">アイテムID</th>
+            <th class="w-60">画像</th>
+            <th>アイテム名</th>
+            <th>説明</th>
+            <th>単価</th>
+            <th>商品コード</th>
+            <th class="w-20">カテゴリ</th>
+            <th>ブランド</th>
+            <th class="w-20">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in pagedListOfCatalogItem.items" :key="item.id">
+            <td class="border">{{ item.id }}</td>
+            <td class="border">
+              <img
+                class="object-contain"
+                :src="getFirstAssetUrl(item.assetCodes)"
+                :alt="item.name"
+              />
+            </td>
+            <td class="border">{{ item.name }}</td>
+            <td class="border">{{ item.description }}</td>
+            <td class="border">{{ toCurrencyJPY(item.price) }}</td>
+            <td class="border">{{ item.productCode }}</td>
+            <td class="border">
+              {{ getCategoryName(item.catalogCategoryId) }}
+            </td>
+            <td class="border">
+              {{ getBrandName(item.catalogBrandId) }}
+            </td>
+            <td class="border text-center">
+              <button
+                type="button"
+                class="rounded bg-blue-600 px-4 py-2 font-bold text-white hover:bg-blue-800"
+                @click="goToEditItem(item.id)"
+              >
+                編集
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-    <table class="table-auto border-separate text-xl">
-      <thead class="bg-blue-50">
-        <tr>
-          <th class="w-20">アイテムID</th>
-          <th class="w-60">画像</th>
-          <th>アイテム名</th>
-          <th>説明</th>
-          <th>単価</th>
-          <th>商品コード</th>
-          <th class="w-20">カテゴリ</th>
-          <th>ブランド</th>
-          <th class="w-20">操作</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="item in pagedListOfCatalogItem.items" :key="item.id">
-          <td class="border">{{ item.id }}</td>
-          <td class="border">
-            <img
-              class="object-contain"
-              :src="getFirstAssetUrl(item.assetCodes)"
-              :alt="item.name"
-            />
-          </td>
-          <td class="border">{{ item.name }}</td>
-          <td class="border">{{ item.description }}</td>
-          <td class="border">{{ toCurrencyJPY(item.price) }}</td>
-          <td class="border">{{ item.productCode }}</td>
-          <td class="border">
-            {{ getCategoryName(item.catalogCategoryId) }}
-          </td>
-          <td class="border">
-            {{ getBrandName(item.catalogBrandId) }}
-          </td>
-          <td class="border text-center">
-            <button
-              type="button"
-              class="rounded bg-blue-600 px-4 py-2 font-bold text-white hover:bg-blue-800"
-              @click="goToEditItem(item.id)"
-            >
-              編集
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
   </div>
 </template>