Improved stability

frontend/src/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import { Space, Title } from '@mantine/core';
+import { LoadingOverlay, Space, Title } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import ServiceRow from '../components/ServiceRow';
@@ -9,14 +9,16 @@ import { errorNotify, servicelist } from '../js/utils';
 function HomePage() {
 
     const [services, setServices] = useState<Service[]>([]);
+    const [loader, setLoader] = useState(true);
     const navigator = useNavigate()
     
-    const updateInfo = () => {
-        servicelist().then(res => {
-            setServices(res)
-        }).catch(
-            err => errorNotify("Home Page Auto-Update failed!", err.toString())
-        )
+    const updateInfo = async () => {
+        await servicelist().then(res => {
+            setServices(res)    
+        }).catch(err => {
+            errorNotify("Home Page Auto-Update failed!", err.toString())
+        })
+        setLoader(false)
     }
 
     useEffect(()=>{
@@ -24,8 +26,11 @@ function HomePage() {
         const updater = setInterval(updateInfo, update_freq)
         return () => { clearInterval(updater) }
     }, []);
+
+
     
     return <div id="service-list" className="center-flex-row">
+        <LoadingOverlay visible={loader} />
         {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
             navigator("/"+srv.id)
         }} />):<><Space h="xl"/> <Title className='center-flex' order={3}>No services found! Add one clicking the button above</Title></>}