Merge pull request #171 from ligangty/edit

Add loading spiner for group constituents of GroupEdit
Commonjava · Feb 27, 2024 · e17a747 · e17a747
2 parents 3240f1c + f348e63
commit e17a747
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 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
@@ -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
@@ -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);