Merged PR 211: Create押下後に処理が成功するまでloadingを表示させる

## 概要
[Task2129: Create押下後に処理が成功するまでloadingを表示させる](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2129)

- ボタン押下時に処理中であることを示すイメージを実装しました

## レビューポイント
- licenseCardIssueSlice.tsでの、fulfilled時のloading解除タイミングについて。
　fulfilled時、csvのblobイメージ作成→ダウンロード実施、という処理を実施しています。
　同時実行を避ける意味で、ダウンロード実施の後（fulfilled処理の最後）でloading解除としていますが、タイミングとして問題ないか。
　（とはいえ、blob作成中に解除する理由は浮かばないので、これで問題ないと考えています。何かあれば、くらいの感覚です）

## UIの変更
- 無し

## 動作確認状況
- ローカルで確認

## 補足
- 相談、参考資料などがあれば

dictation_client/src/features/license/licenseCardIssue/licenseCardIssueSlice.ts

@@ -5,6 +5,7 @@ import { createCardLicenseAsync } from "./operations";
 const initialState: LicenseCardIssuesState = {
   apps: {
     numberOfCreateLicenses: 0,
+    isLoading: false,
   },
 };
 export const licenseCardSlice = createSlice({
@@ -23,6 +24,9 @@ export const licenseCardSlice = createSlice({
     },
   },
   extraReducers: (builder) => {
+    builder.addCase(createCardLicenseAsync.pending, (state) => {
+      state.apps.isLoading = true;
+    });
     builder.addCase(createCardLicenseAsync.fulfilled, (state, action) => {
       // csvファイルダウンロード処理
       // ファイル名は「{発行日時}_licenseCard.csv」とする
@@ -43,6 +47,10 @@ export const licenseCardSlice = createSlice({
       document.body.appendChild(a);
       a.click();
       a.parentNode?.removeChild(a);
+      state.apps.isLoading = false;
+    });
+    builder.addCase(createCardLicenseAsync.rejected, (state) => {
+      state.apps.isLoading = false;
     });
   },
 });

dictation_client/src/features/license/licenseCardIssue/selectors.ts

@@ -22,3 +22,6 @@ export const checkErrorIncorrectNumberOfCreateLicenses = (
 
 export const selectNumberOfCreateLicenses = (state: RootState) =>
   state.licenseCardIssue.apps.numberOfCreateLicenses;
+
+export const selectIsLoading = (state: RootState) =>
+  state.licenseCardIssue.apps.isLoading;

dictation_client/src/features/license/licenseCardIssue/state.ts

@@ -4,4 +4,5 @@ export interface LicenseCardIssuesState {
 
 export interface Apps {
   numberOfCreateLicenses: number;
+  isLoading: boolean;
 }

dictation_client/src/pages/LicensePage/cardLicenseIssuePopup.tsx

@@ -12,7 +12,9 @@ import {
   selectInputValidationErrors,
   createCardLicenseAsync,
   cleanupApps,
+  selectIsLoading,
 } from "../../features/license/licenseCardIssue/index";
+import progress_activit from "../../assets/images/progress_activit.svg";
 
 interface CardLicenseIssuePopupProps {
   onClose: () => void;
@@ -27,6 +29,8 @@ export const CardLicenseIssuePopup: React.FC<CardLicenseIssuePopupProps> = (
   const initCount = useSelector(selectNumberOfCreateLicenses);
   const [count, setCount] = useState<number>(initCount);
 
+  const isLoading = useSelector(selectIsLoading);
+
   useEffect(
     () => () => {
       // useEffectのreturnとしてcleanupAppsを実行することで、ポップアップのアンマウント時に初期化を行う
@@ -140,9 +144,17 @@ export const CardLicenseIssuePopup: React.FC<CardLicenseIssuePopupProps> = (
                     "cardLicenseIssuePopupPage.label.createButton"
                   )
                 )}
-                className={`${styles.formSubmit} ${styles.marginBtm1} ${styles.isActive}`}
+                className={`${styles.formSubmit} ${styles.marginBtm1} ${
+                  !isLoading ? styles.isActive : ""
+                }`}
                 onClick={onCreateLicense}
               />
+              <img
+                style={{ display: isLoading ? "inline" : "none" }}
+                src={progress_activit}
+                className={styles.icLoading}
+                alt="Loading"
+              />
             </dd>
           </dl>
         </form>