ui: add loading state for LiveSessionReloadButton.tsx

frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx

@@ -98,7 +98,7 @@ function LiveSessionList() {
     <div>
       <div className="bg-white py-3 rounded-lg border shadow-sm">
         <div className="flex mb-4 pb-2 px-3 justify-between items-center border-b border-b-gray-lighter">
-          <LiveSessionReloadButton onClick={refetch} />
+          <LiveSessionReloadButton />
           <div className="flex items-center">
             <div className="flex items-center ml-6">
               <span className="mr-2 color-gray-medium">{t('Sort By')}</span>

frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx

@@ -4,15 +4,11 @@ import { observer } from 'mobx-react-lite';
 import ReloadButton from '../ReloadButton';
 import { useTranslation } from 'react-i18next';
 
-interface Props {
-  onClick: () => void;
-}
-
-function LiveSessionReloadButton(props: Props) {
+function LiveSessionReloadButton() {
   const { t } = useTranslation();
-  const { sessionStore } = useStore();
-  const { onClick } = props;
-  const loading = sessionStore.loadingLiveSessions;
+  const { searchStoreLive } = useStore();
+  const onClick = searchStoreLive.fetchSessions
+  const loading = searchStoreLive.loading;
   return (
     <ReloadButton label={t('Refresh')} buttonSize={'small'} iconSize={14} loading={loading} onClick={onClick} className="cursor-pointer" />
   );

frontend/app/components/shared/ReloadButton/ReloadButton.tsx

@@ -18,6 +18,7 @@ export default function ReloadButton(props: Props) {
       <Button
         type="default"
         size={buttonSize}
+        loading={loading}
         onClick={onClick}
         icon={<SyncOutlined style={{ fontSize: iconSize }} />}
       >

frontend/app/mstore/searchStoreLive.ts

@@ -75,6 +75,8 @@ class SearchStoreLive {
 
   loadingFilterSearch = false;
 
+  loading = false;
+
   constructor() {
     makeAutoObservable(this);
 
@@ -242,11 +244,22 @@ class SearchStoreLive {
     });
   };
 
-  async fetchSessions() {
-    await sessionStore.fetchLiveSessions({
-      ...this.instance.toSearch(),
-      page: this.currentPage,
-    });
+  setLoading = (val: boolean) => {
+    this.loading = val;
+  }
+
+  fetchSessions = async () => {
+    this.setLoading(true)
+    try {
+      await sessionStore.fetchLiveSessions({
+        ...this.instance.toSearch(),
+        page: this.currentPage,
+      });
+    } catch (e) {
+      console.error('Error fetching sessions:', e);
+    } finally {
+      this.setLoading(false)
+    }
   }
 }