会議の作成と編集時にローディングローダーを追加する

backend/public/css/app.css

@@ -17450,6 +17450,28 @@ a {
   }
 }
 
+.uploading-css-loader {
+  color: #dddddd !important;
+  position: fixed;
+  z-index: 10;
+}
+@media screen and (min-width: 1068px) {
+  .uploading-css-loader {
+    width: 80px !important;
+    height: 80px !important;
+    top: calc(45vh - 40px);
+    left: calc(50vw - 40px);
+  }
+}
+@media screen and (max-width: 1068px) {
+  .uploading-css-loader {
+    width: 50px !important;
+    height: 50px !important;
+    top: calc(45vh - 25px);
+    left: calc(50vw - 25px);
+  }
+}
+
 .modal-css-loader {
   color: #b2b4b2 !important;
   position: fixed;

backend/resources/js/admin/meeting/edit.jsx

@@ -7,6 +7,7 @@ import RemoveIcon from '@mui/icons-material/Remove';
 import Alert from '../../component/alert';
 import PreviewPDF from '../../component/preview_pdf';
 import PageLoader from '../../component/page_loader';
+import UploadingProgress from '../../component/modal_uploading';
 
 const REGISTED_IMAGE_ID = -100;            //登録された画像を区別するために導入されます。
 
@@ -368,7 +369,8 @@ const MeetingEdit = (props) => {
                                             : <p className="text-center">子はありません。</p>
                                         }
                                         </div>
-
+                                        
+                                        <UploadingProgress show={submit}/>
                                         <LoadingButton 
                                             type="submit" fullWidth
                                             loading={submit}

backend/resources/js/component/modal_uploading.jsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import {
+    Dialog
+} from '@mui/material';
+import { CircularProgress  } from '@material-ui/core';
+
+
+export default function UploadingProgress({ show }){
+
+	return (
+        <Dialog
+            open={show}
+            keepMounted
+            aria-describedby="alert-dialog-slide-description"
+        >
+            <CircularProgress 
+                className="uploading-css-loader"
+                sx={{ 
+                    animationDuration: '500ms',
+                }}
+                thickness={1}
+                value={50}
+            />
+        </Dialog>
+	)
+}
+

backend/resources/js/parent/meeting/add.jsx

@@ -8,6 +8,7 @@ import Alert from '../../component/alert';
 import Notification from '../notification';
 import PreviewPDF from '../../component/preview_pdf';
 import PageLoader from '../../component/page_loader';
+import UploadingProgress from '../../component/modal_uploading';
 
 
 const MeetingAdd = (props) => {
@@ -366,6 +367,8 @@ const MeetingAdd = (props) => {
                                             }
                                         </div>
 
+                                        <UploadingProgress show={submit}/>
+
                                         <LoadingButton 
                                             type="submit" fullWidth
                                             loading={submit}

backend/resources/js/parent/meeting/edit.jsx

@@ -10,6 +10,7 @@ import Alert from '../../component/alert';
 import Notification from '../notification';
 import PreviewPDF from '../../component/preview_pdf';
 import PageLoader from '../../component/page_loader';
+import UploadingProgress from '../../component/modal_uploading';
 
 
 
@@ -400,7 +401,7 @@ useEffect(()=>{
                                                 : <p className="text-center">子はありません。</p>
                                             }
                                         </div>
-
+                                        <UploadingProgress show={submit}/>
                                         <LoadingButton 
                                             type="submit" fullWidth
                                             loading={submit}

backend/resources/sass/layouts/_main.scss

@@ -121,6 +121,24 @@ a{
   }
 }
 
+.uploading-css-loader{
+  color: rgb(221, 221, 221) !important;
+  position: fixed;
+  z-index: 10;
+  @media screen and (min-width:1068px){
+    width: 80px !important;
+    height: 80px !important;
+    top: calc(45vh - 40px);
+    left: calc( 50vw - 40px);
+  }
+  @media screen and (max-width:1068px){
+    width: 50px !important;
+    height: 50px !important;
+    top: calc(45vh - 25px);
+    left: calc(50vw - 25px);
+  }
+}
+
 .modal-css-loader{
   color: rgb(178, 180, 178) !important;
   position: fixed;