From f348e63dd0af054a79cb64c7c101ec5fc9f8113d Mon Sep 17 00:00:00 2001
From: Gang Li <ligangty@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:54:09 +0800
Subject: [PATCH] Add loading spiner for group constituents of GroupEdit

---
 .../src/app/components/content/group/GroupEdit.jsx     | 10 +++++++++-
 src/main/webui/src/server/app.js                       |  3 ++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/main/webui/src/app/components/content/group/GroupEdit.jsx b/src/main/webui/src/app/components/content/group/GroupEdit.jsx
index 016f4e9..2547ef8 100644
--- a/src/main/webui/src/app/components/content/group/GroupEdit.jsx
+++ b/src/main/webui/src/app/components/content/group/GroupEdit.jsx
@@ -19,6 +19,7 @@ import {useLocation, useParams} from 'react-router-dom';
 import {useForm} from 'react-hook-form';
 import {PropTypes} from 'prop-types';
 import {StoreEditControlPanel as EditControlPanel} from '../common/StoreControlPanels.jsx';
+import {LoadingSpiner} from '../common/LoadingSpiner.jsx';
 import {DisableTimeoutHint} from '../common/Hints.jsx';
 import {PackageTypeSelect} from '../common/PackageTypeSelect.jsx';
 // import ViewJsonDebugger from './Debugger.jsx';
@@ -150,6 +151,7 @@ export default function GroupEdit() {
   const [available, setAvailable] = useState([]);
   const location = useLocation();
   const {packageType, name} = useParams();
+  const [avaiLoading, setAvaiLoading] = useState(true);
   const {
     register,
     reset,
@@ -162,6 +164,7 @@ export default function GroupEdit() {
   const mode = path.match(/.*\/new$/u) ? 'new' : 'edit';
   useEffect(() => {
     const fetchAvailable = async () => {
+      setAvaiLoading(true);
       // get available Store data
       const availableRes = await statsRes.getAllEndpoints();
       let allAvailable = new Set();
@@ -173,6 +176,7 @@ export default function GroupEdit() {
       } else {
         Utils.logMessage(`Getting available constituents failed! Error reason: ${statsRes.error.message}`);
       }
+      setAvaiLoading(false);
       return allAvailable;
     };
 
@@ -289,7 +293,11 @@ export default function GroupEdit() {
             </textarea>
           </div>
           <div className="fieldset-caption">Constituents</div>
-          <EditConstituents store={store} currentAvailable={available}/>
+          {
+           avaiLoading?
+            <LoadingSpiner /> :
+            <EditConstituents store={store} currentAvailable={available} />
+          }
         </div>
       </div>
       {
diff --git a/src/main/webui/src/server/app.js b/src/main/webui/src/server/app.js
index 881a180..fc094c8 100644
--- a/src/main/webui/src/server/app.js
+++ b/src/main/webui/src/server/app.js
@@ -41,7 +41,8 @@ app.get('/api/stats/version-info', (req, res) => {
     });
 });
 
-app.get('/api/stats/all-endpoints', (req, res) => {
+app.get('/api/stats/all-endpoints', async (req, res) => {
+  await sleep(3000);
   const statsEndpointsFile = path.resolve(__dirname, `./mock/list/FakeAllEndPoints.json`);
   const list = require(statsEndpointsFile);
   res.status(200).json(list);