Enhance ApiServerContext with Improved Reconnection Handling

- Added loading state indication during reconnection attempts in the modal.
- Adjusted modal dimensions and styles based on the reconnection status for better user experience.
- Streamlined the display logic for connection lost messages and reconnection progress, improving clarity and responsiveness.

src/components/Dashboard/context/ApiServerContext.jsx

@@ -12,13 +12,14 @@ import { message, Modal, Space, Button, Typography, Flex } from 'antd'
 import PropTypes from 'prop-types'
 import { AuthContext } from './AuthContext'
 import { useLocation, useNavigate } from 'react-router-dom'
-
+import { LoadingOutlined } from '@ant-design/icons'
 import axios from 'axios'
 import ExclamationOctagonIcon from '../../Icons/ExclamationOctagonIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import LockIcon from '../../Icons/LockIcon'
 import config from '../../../config'
 import loglevel from 'loglevel'
+
 import { getModelByName } from '../../../database/ObjectModels'
 import ProgressDisplay from '../common/ProgressDisplay'
 const logger = loglevel.getLogger('ApiServerContext')
@@ -2920,19 +2921,27 @@ const ApiServerProvider = ({ children }) => {
       {children}
       <Modal
         title={
+          !isReconnecting ? (
             <Space size={'middle'}>
               <ExclamationOctagonIcon />
               Connection Lost
             </Space>
+          ) : (
+            false
+          )
         }
         open={Boolean(token) && authenticated == true && connectionIssue}
-        style={{ maxWidth: 480 }}
+        style={{ maxWidth: !isReconnecting ? 480 : 260 }}
         zIndex={3000}
         closable={false}
+        height={isReconnecting ? 20 : undefined}
         centered
+        className={isReconnecting ? 'loading-modal' : undefined}
         maskClosable={false}
         getContainer={() => document.body}
-        footer={[
+        footer={
+          !isReconnecting
+            ? [
                 <Button
                   key='reconnect'
                   loading={isReconnecting}
@@ -2940,8 +2949,11 @@ const ApiServerProvider = ({ children }) => {
                 >
                   Reconnect
                 </Button>
-        ]}
+              ]
+            : false
+        }
       >
+        {!isReconnecting ? (
           <Flex vertical gap='middle'>
             <Text>
               {isReconnecting
@@ -2956,6 +2968,12 @@ const ApiServerProvider = ({ children }) => {
               status={'exception'}
             />
           </Flex>
+        ) : (
+          <Space size={'middle'}>
+            <LoadingOutlined />
+            <Text style={{ margin: 0 }}>Reconnecting, please wait...</Text>
+          </Space>
+        )}
       </Modal>
       <Modal
         title={