Merge pull request #184 from nakazawakan/fe_fix

アラートを表示するときにスクロールトップに移動します。

backend/public/css/app.css

@@ -17399,29 +17399,29 @@ a {
 }
 
 .css-loader {
-  color: green !important;
+  color: #b2b4b2 !important;
   position: fixed;
   z-index: 10;
 }
 @media screen and (min-width: 1068px) {
   .css-loader {
-    width: 40px !important;
-    height: 40px !important;
-    top: calc(45vh - 20px);
-    left: calc(50vw + 120px - 20px);
+    width: 80px !important;
+    height: 80px !important;
+    top: calc(45vh - 40px);
+    left: calc(50vw + 120px - 40px);
   }
 }
 @media screen and (max-width: 1068px) {
   .css-loader {
-    width: 30px !important;
-    height: 30px !important;
-    top: calc(45vh - 15px);
-    left: calc(50vw - 15px);
+    width: 50px !important;
+    height: 50px !important;
+    top: calc(45vh - 25px);
+    left: calc(50vw - 25px);
   }
 }
 
 .modal-css-loader {
-  color: green !important;
+  color: #b2b4b2 !important;
   position: fixed;
   z-index: 10;
   width: 30px !important;

backend/resources/js/admin/child/detail.jsx

@@ -2,11 +2,11 @@ import React, { useRef, useEffect, useState } from 'react';
 import { useHistory, Link } from 'react-router-dom';
 import axios from 'axios';
 
-import { CircularProgress  } from '@material-ui/core';
 import IconButton from "@material-ui/core/IconButton";
 import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
 
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 import ModalConfirm from '../../component/modal_confirm';
  
 
@@ -103,7 +103,7 @@ const ChildDetail = (props) => {
                     <div className="profile-wrap" style={{ minHeight:'500px'}}>
                     {
                         (!loaded || submit_image) &&
-                            <CircularProgress className="css-loader"/>
+                            <PageLoader />
                     }
                     { 
                         loaded && child &&

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

@@ -2,9 +2,9 @@ import React, { useRef, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
 import { LoadingButton } from '@material-ui/lab';
-import { CircularProgress  } from '@material-ui/core';
 
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 
 
 const ChildEdit = (props) => {
@@ -110,8 +110,7 @@ const ChildEdit = (props) => {
             <div className="l-content-wrap">
                 <section className="edit-container">
                     {
-                        !loaded &&
-                            <CircularProgress className="css-loader"/>
+                        !loaded && <PageLoader />
                     }
                     {
                         loaded && child &&

backend/resources/js/admin/child/index.jsx

@@ -1,5 +1,4 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { CircularProgress  } from '@material-ui/core';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
 
@@ -7,6 +6,7 @@ import IconButton from '@mui/material/IconButton';
 import SearchIcon from '@mui/icons-material/Search';
 import InfiniteScroll from "react-infinite-scroll-component";
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 
 const INFINITE = 10;
 const SCROLL_DELAY_TIME = 1500;
@@ -106,8 +106,7 @@ const Child = (props) => {
           <div className="search-wrap">
             <div className="search-content">
               {
-                !loaded &&
-                  <CircularProgress className="css-loader"/>
+                !loaded && <PageLoader />
               }
               { 
                 loaded && 

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

@@ -2,13 +2,13 @@ import { useRef, useEffect, useState } from 'react';
 import { useHistory, Link } from 'react-router-dom';
 import moment from 'moment';
 import axios from 'axios';
-import { CircularProgress  } from '@material-ui/core';
 
 import Alert from '../../component/alert';
 import ModalPdf from '../../component/pdf/modal_pdf';
 import ModalMemo from '../../component/modal_memo';
 import ModalConfirm from '../../component/modal_confirm';
 import Thumbnail from '../../component/thumbnail';
+import PageLoader from '../../component/page_loader';
 
 const MeetingDetail = (props) => {
 
@@ -91,8 +91,7 @@ const MeetingDetail = (props) => {
             <div className="p-article">
               <div className="p-article-wrap" style={{ minHeight:'700px'}}>
               {
-                !loaded &&
-                  <CircularProgress className="css-loader"/>
+                !loaded && <PageLoader />
               }
               {
                 loaded && meeting &&

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

@@ -1,13 +1,12 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
-import { CircularProgress  } from '@material-ui/core';
 import { LoadingButton } from '@material-ui/lab';
 import IconButton from '@mui/material/IconButton';
 import RemoveIcon from '@mui/icons-material/Remove';
 import Alert from '../../component/alert';
 import PreviewPDF from '../../component/preview_pdf';
-
+import PageLoader from '../../component/page_loader';
 
 const REGISTED_IMAGE_ID = -100;            //登録された画像を区別するために導入されます。
 
@@ -219,7 +218,7 @@ const MeetingEdit = (props) => {
                     <div className="p-article-wrap" style={{ minHeight:'500px'}}>
                     {
                         (!loaded || image_sending) &&
-                            <CircularProgress className="css-loader"/>
+                            <PageLoader />
                     }
                     {
                         loaded && meeting &&

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

@@ -1,5 +1,4 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { CircularProgress  } from '@material-ui/core';
 import moment from 'moment';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
@@ -7,6 +6,7 @@ import IconButton from '@mui/material/IconButton';
 import SearchIcon from '@mui/icons-material/Search';
 import InfiniteScroll from "react-infinite-scroll-component";
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 
 const INFINITE = 10;
 const SCROLL_DELAY_TIME = 1500;
@@ -138,8 +138,7 @@ const Meeting = (props) => {
             <div className="search-wrap">
               <div className="search-content">
                 {
-                  !loaded &&
-                    <CircularProgress className="css-loader"/>
+                  !loaded && <PageLoader />
                 }
                 { 
                   loaded && 

backend/resources/js/admin/parent/detail.jsx

@@ -3,11 +3,11 @@ import { useHistory, Link } from 'react-router-dom';
 import axios from 'axios';
 
 import { LoadingButton } from '@material-ui/lab';
-import { CircularProgress  } from '@material-ui/core';
 import IconButton from "@material-ui/core/IconButton";
 import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
 
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 import ModalConfirm from '../../component/modal_confirm';
 
 
@@ -109,7 +109,7 @@ const ParentDetail = (props) => {
                     <div className="profile-wrap" style={{ minHeight:'500px'}}>
                     {
                         (!loaded || submit_image) &&
-                            <CircularProgress className="css-loader"/>
+                            <PageLoader />
                     }
                     { 
                         loaded && parent &&

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

@@ -2,8 +2,8 @@ import React, { useRef, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
 import { LoadingButton } from '@material-ui/lab';
-import { CircularProgress  } from '@material-ui/core';
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 
 const ParentEdit = (props) => {
 
@@ -103,8 +103,7 @@ const ParentEdit = (props) => {
             <div className="l-content-wrap">
                 <section className="edit-container">
                     {
-                        !loaded &&
-                            <CircularProgress className="css-loader"/>
+                        !loaded && <PageLoader />
                     }
                     {
                         loaded && parent &&

backend/resources/js/admin/parent/index.jsx

@@ -1,11 +1,11 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { CircularProgress  } from '@material-ui/core';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
 import IconButton from '@mui/material/IconButton';
 import SearchIcon from '@mui/icons-material/Search';
 import InfiniteScroll from "react-infinite-scroll-component";
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 
 const INFINITE = 10;
 const SCROLL_DELAY_TIME = 1500;
@@ -113,8 +113,7 @@ const Parent = (props) => {
           <div className="search-wrap">
             <div className="search-content">
               {
-                !loaded &&
-                  <CircularProgress className="css-loader"/>
+                !loaded && <PageLoader />
               }
               { 
                 loaded && 

backend/resources/js/child/meeting/detail.jsx

@@ -1,7 +1,6 @@
 import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import { Link, useHistory } from 'react-router-dom';
-import { CircularProgress  } from '@material-ui/core';
 
 import Notification from '../notification';
 import moment from 'moment';
@@ -10,6 +9,7 @@ import ModalPdf from '../../component/pdf/modal_pdf';
 import ModalMemo from '../../component/modal_memo';
 import ModalConfirm from '../../component/modal_confirm';
 import Thumbnail from '../../component/thumbnail';
+import PageLoader from '../../component/page_loader';
 
 const MeetingDetail = (props) => {
 
@@ -110,8 +110,7 @@ const MeetingDetail = (props) => {
                 <Notification notice={notice}/>
             </div>
             {
-                !loaded &&
-                    <CircularProgress className="css-loader"/>
+                !loaded && <PageLoader />
             }
             {
                 loaded && meeting &&

backend/resources/js/child/meeting/index.jsx

@@ -2,10 +2,10 @@ import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
 import moment from 'moment';
-import { CircularProgress  } from '@material-ui/core';
 
 import Notification from '../notification';
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 import InfiniteScroll from "react-infinite-scroll-component";
 
 const INFINITE = 10;
@@ -124,8 +124,7 @@ const Meeting = () => {
                         </div>
                     </div>
                     {
-                        !loaded &&
-                            <CircularProgress className="css-loader"/>
+                        !loaded && <PageLoader />
                     }
                     {
                         loaded &&

backend/resources/js/child/parent/detail.jsx

@@ -1,10 +1,10 @@
 import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
-import { CircularProgress  } from '@material-ui/core';
 
 import Notification from '../notification';
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 
 const ParentDetail = (props) => {
 
@@ -62,8 +62,7 @@ const ParentDetail = (props) => {
             <div className="l-content-wrap">
                 <section className="profile-container">
                 {
-                    !loaded &&
-                        <CircularProgress className="css-loader"/>
+                    !loaded && <PageLoader/>
                 }
                 {
                     loaded && parent &&

backend/resources/js/child/parent/index.jsx

@@ -1,10 +1,10 @@
 import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
-import { CircularProgress  } from '@material-ui/core';
 
 import Notification from '../notification';
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 import InfiniteScroll from "react-infinite-scroll-component";
 
 const INFINITE = 10;
@@ -67,8 +67,7 @@ const Parent = () => {
 
             <div className="l-content-wrap">
             {
-                !loaded &&
-                    <CircularProgress className="css-loader"/>
+                !loaded && <PageLoader />
             }
             {
                 loaded && 

backend/resources/js/child/profile/edit.jsx

@@ -5,7 +5,7 @@ import { LoadingButton } from '@material-ui/lab';
 
 import Notification from '../notification';
 import Alert from '../../component/alert';
-import { CircularProgress  } from '@material-ui/core';
+import PageLoader from '../../component/page_loader';
 
 
 const ProfileEdit = () => {
@@ -130,8 +130,7 @@ const ProfileEdit = () => {
             <div className="l-content-wrap">
                 <section className="edit-container">
                 {
-                    !loaded &&
-                        <CircularProgress className="css-loader"/>
+                    !loaded && <PageLoader />
                 }
                 {
                     loaded && profile &&

backend/resources/js/child/profile/index.jsx

@@ -2,10 +2,10 @@ import React, { useRef, useEffect, useState } from 'react';
 import { useHistory, Link } from 'react-router-dom';
 import IconButton from "@material-ui/core/IconButton";
 import axios from 'axios';
-import { CircularProgress  } from '@material-ui/core';
 import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
 
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 import Notification from '../notification';
 
 const Profile = (props) => {
@@ -100,7 +100,7 @@ const Profile = (props) => {
                 <section className="profile-container">
                     {
                         (!loaded || submit_image) &&
-                            <CircularProgress className="css-loader"/>
+                            <PageLoader />
                     }
                     {
                         loaded && profile &&

backend/resources/js/child/search/index.jsx

@@ -2,9 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { useHistory, Link } from 'react-router-dom';
 import axios from 'axios';
 import moment from 'moment';
-import { CircularProgress  } from '@material-ui/core';
 
 import Notification from '../notification';
+import PageLoader from '../../component/page_loader';
 import IconButton from '@mui/material/IconButton';
 import SearchIcon from '@mui/icons-material/Search';
 import InfiniteScroll from "react-infinite-scroll-component";
@@ -125,8 +125,7 @@ const Search = () => {
                         </div>
                     </div>
                     {
-                        !loaded &&
-                            <CircularProgress className="css-loader"/>
+                        !loaded && <PageLoader />
                     }
                     {
                         loaded && !initPage &&

backend/resources/js/component/alert.jsx

@@ -5,16 +5,18 @@ const Alert = (props) => {
     //props.type == 'success'  alert-success
     //props.type == 'danger'  alert-danger
 
-    useEffect(
-        () => {
-              let timer = setTimeout(()=>{
-                clearTimeout(timer);
-                if(props.hide)  props.hide();
-            }, 3000)
-        },[]);
+    useEffect(() => {
+        window.scrollTo(0, 0);
+        let timer = setTimeout(()=>{
+            clearTimeout(timer);
+            if(props.hide)  props.hide();
+        }, 3000)
+    },[]);
 
 	return (
-        <div className={`alert-${props.type} ft-18 ft-xs-16`}>{props.children}</div>
+        <div className={`alert-${props.type} ft-18 ft-xs-16`}>
+            {props.children}
+        </div>
 	)
 }
 

backend/resources/js/component/modal_setting_notify.jsx

@@ -87,7 +87,14 @@ export default function ModalSettingNotify({show, handleClose, meetingId}){
         </DialogTitle>
         <DialogContent className="position-relative">
           {
-            !loaded && <CircularProgress className="modal-css-loader"/>
+            !loaded && 
+              <CircularProgress 
+                className="modal-css-loader"
+                sx={{ 
+                  animationDuration: '600ms',
+                }}
+                thickness={2}
+              />
           }
           {
             loaded &&

backend/resources/js/component/page_loader.jsx

@@ -0,0 +1,19 @@
+
+import React from 'react';
+import { CircularProgress  } from '@material-ui/core';
+
+
+const PageLoader = () => {
+	return (
+        <CircularProgress 
+            className="css-loader"
+            sx={{ 
+                animationDuration: '500ms',
+            }}
+            thickness={1}
+            value={50}
+        />
+    )
+}
+
+export default PageLoader;

backend/resources/js/parent/auth/index.js

@@ -44,7 +44,7 @@ export default class ParentAuth extends Component {
 // ----------------------------------------------------------------------
 
 if(document.getElementById('p-auth')){
-    console.log("v1: 2021/12/15")
+    console.log("v1: 2021/12/21")
 	ReactDOM.render(
 		<ParentAuth />,
 		document.getElementById('p-auth')

backend/resources/js/parent/child/detail.jsx

@@ -1,11 +1,12 @@
 import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import { Link, useHistory } from 'react-router-dom';
-import { CircularProgress  } from '@material-ui/core';
+
 import moment from 'moment';
 import Notification from '../notification';
 import ModalConfirm from '../../component/modal_confirm';
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 
 const ChildDetail = (props) => {
 
@@ -85,8 +86,7 @@ const ChildDetail = (props) => {
 
             <div className="l-content-wrap">
               {
-                !loaded &&
-                    <CircularProgress className="css-loader"/>
+                !loaded && <PageLoader/>
               }
               {
                 loaded && child &&

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

@@ -8,8 +8,8 @@ import moment from 'moment';
 import { LoadingButton } from '@material-ui/lab';
 import Notification from '../notification';
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 import { useHistory } from 'react-router';
-import { CircularProgress } from '@material-ui/core';
 
 const ChildEdit = (props) => {
 
@@ -90,8 +90,9 @@ const ChildEdit = (props) => {
 
         <div className="l-content-wrap">
           <section className="edit-container">
-            { !loaded && 
-              <CircularProgress className="css-loader"/> }
+            { 
+              !loaded && <PageLoader/>
+            }
             {
               loaded && hire_at &&
               <div className="edit-wrap">

backend/resources/js/parent/child/index.jsx

@@ -1,10 +1,10 @@
 import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
-import { CircularProgress  } from '@material-ui/core';
 
 import Notification from '../notification';
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 import InfiniteScroll from "react-infinite-scroll-component";
 
 const INFINITE = 10;
@@ -76,8 +76,7 @@ const Child = (props) => {
 
             <div className="l-content-wrap">
             {
-                !loaded &&
-                    <CircularProgress className="css-loader"/>
+                !loaded && <PageLoader/>
             }
             {
                 loaded && 

backend/resources/js/parent/favorite/index.jsx

@@ -2,11 +2,11 @@ import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
 import moment from 'moment';
-import { CircularProgress  } from '@material-ui/core';
 import IconButton from '@mui/material/IconButton';
 
 import Notification from '../notification';
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 import InfiniteScroll from "react-infinite-scroll-component";
 import { isObject } from 'lodash';
 
@@ -184,8 +184,7 @@ const Favorite = (props) => {
                         </div>
                     </div>
                     {
-                        !loaded &&
-                          <CircularProgress className="css-loader"/>
+                        !loaded && <PageLoader/>
                     }
                     {
                         loaded &&

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

@@ -1,13 +1,13 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
-import { CircularProgress  } from '@material-ui/core';
 import { LoadingButton } from '@material-ui/lab';
 import IconButton from '@mui/material/IconButton';
 import RemoveIcon from '@mui/icons-material/Remove';
 import Alert from '../../component/alert';
 import Notification from '../notification';
 import PreviewPDF from '../../component/preview_pdf';
+import PageLoader from '../../component/page_loader';
 
 
 const MeetingAdd = (props) => {
@@ -211,8 +211,7 @@ const MeetingAdd = (props) => {
                 <div className="p-article">
                     <div className="p-article-wrap position-relative" style={{ minHeight:'500px'}}>
                     {
-                        !loaded &&
-                        <CircularProgress className="css-loader"/>
+                        !loaded && <PageLoader />
                     }
                     {
                         loaded && 

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

@@ -2,7 +2,6 @@ import React, { useRef, useEffect, useState } from 'react';
 import moment from 'moment';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
-import { CircularProgress  } from '@material-ui/core';
 
 import ModalEditMemo from '../../component/modal_edit_memo';
 import ModalConfirm from '../../component/modal_confirm';
@@ -11,6 +10,7 @@ import Notification from '../notification';
 import ModalSettingNotify from '../../component/modal_setting_notify';
 import Alert from '../../component/alert';
 import Thumbnail from '../../component/thumbnail';
+import PageLoader from '../../component/page_loader';
 
 const MeetingDetail = (props) => {
 
@@ -163,8 +163,7 @@ const MeetingDetail = (props) => {
             <Notification notice={notice}/>
           </div>
           {
-            !loaded && 
-              <CircularProgress className="css-loader"/>
+            !loaded && <PageLoader />
           }
           {
             loaded && meeting &&

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

@@ -1,7 +1,6 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
-import { CircularProgress  } from '@material-ui/core';
 import { LoadingButton } from '@material-ui/lab';
 import IconButton from '@mui/material/IconButton';
 import RemoveIcon from '@mui/icons-material/Remove';
@@ -10,6 +9,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import Alert from '../../component/alert';
 import Notification from '../notification';
 import PreviewPDF from '../../component/preview_pdf';
+import PageLoader from '../../component/page_loader';
 
 
 
@@ -248,7 +248,7 @@ useEffect(()=>{
                     <div className="p-article-wrap position-relative" style={{ minHeight:'500px'}}>
                     {
                         (!loaded || image_sending) &&
-                            <CircularProgress className="css-loader"/>
+                            <PageLoader/>
                     }
                     {
                         loaded && meeting &&

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

@@ -2,13 +2,12 @@ import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
 import moment from 'moment';
-import { CircularProgress  } from '@material-ui/core';
-import IconButton from '@mui/material/IconButton';
 
 import Notification from '../notification';
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 import InfiniteScroll from "react-infinite-scroll-component";
-import { isObject } from 'lodash';
+
 
 const INFINITE = 10;
 const SCROLL_DELAY_TIME = 1500;
@@ -191,8 +190,7 @@ const Meeting = (props) => {
                         </div>
                     </div>
                     {
-                        !loaded &&
-                            <CircularProgress className="css-loader"/>
+                        !loaded && <PageLoader/>
                     }
                     {
                         loaded &&

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

@@ -1,8 +1,8 @@
 import { useRef, useEffect, useState } from 'react';
-import { CircularProgress  } from '@material-ui/core';
 import { LoadingButton } from '@material-ui/lab';
 import Notification from '../notification';
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 import { useHistory } from 'react-router';
 
 const ProfileEdit = () => {
@@ -100,8 +100,7 @@ const ProfileEdit = () => {
         <div className="l-content-wrap">
           <section className="edit-container">
           {
-            !loaded && 
-            <CircularProgress className="css-loader"/>
+            !loaded && <PageLoader/>
           }
           {
             loaded && params &&

backend/resources/js/parent/profile/index.jsx

@@ -2,10 +2,10 @@ import React, { useRef, useEffect, useState } from 'react';
 import { useHistory, Link } from 'react-router-dom';
 import IconButton from "@material-ui/core/IconButton";
 import axios from 'axios';
-import { CircularProgress  } from '@material-ui/core';
 import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
 
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 import Notification from '../notification';
 
 const Profile = (props) => {
@@ -100,7 +100,7 @@ const Profile = (props) => {
                 <section className="profile-container">
                     {
                         (!loaded || submit_image) &&
-                            <CircularProgress className="css-loader"/>
+                            <PageLoader/>
                     }
                     {
                         loaded &&

backend/resources/js/parent/search/index.jsx

@@ -2,12 +2,12 @@ import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
 import moment from 'moment';
-import { CircularProgress  } from '@material-ui/core';
 import IconButton from '@mui/material/IconButton';
 import SearchIcon from '@mui/icons-material/Search';
 
 import Notification from '../notification';
 import Alert from '../../component/alert';
+import PageLoader from '../../component/page_loader';
 import InfiniteScroll from "react-infinite-scroll-component";
 import { isObject } from 'lodash';
 
@@ -190,8 +190,7 @@ const Search = (props) => {
                         </div>
                     </div>
                     {
-                        !loaded &&
-                          <CircularProgress className="css-loader"/>
+                        !loaded && <PageLoader/>
                     }
                     {
                         loaded && !initPage &&

backend/resources/sass/layouts/_main.scss

@@ -104,25 +104,25 @@ a{
 }
 
 .css-loader{
-  color: green !important;
+  color: rgb(178, 180, 178) !important;
   position: fixed;
   z-index: 10;
   @media screen and (min-width:1068px){
-    width: 40px !important;
-    height: 40px !important;
-    top: calc(45vh - 20px);
-    left: calc( 50vw + 240px / 2 - 20px);
+    width: 80px !important;
+    height: 80px !important;
+    top: calc(45vh - 40px);
+    left: calc( 50vw + 240px / 2 - 40px);
   }
   @media screen and (max-width:1068px){
-    width: 30px !important;
-    height: 30px !important;
-    top: calc(45vh - 15px);
-    left: calc(50vw - 15px);
+    width: 50px !important;
+    height: 50px !important;
+    top: calc(45vh - 25px);
+    left: calc(50vw - 25px);
   }
 }
 
 .modal-css-loader{
-  color: green !important;
+  color: rgb(178, 180, 178) !important;
   position: fixed;
   z-index: 10;
   width: 30px !important;