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,42 +2921,59 @@ const ApiServerProvider = ({ children }) => {
       {children}
       <Modal
         title={
-          <Space size={'middle'}>
-            <ExclamationOctagonIcon />
-            Connection Lost
-          </Space>
+          !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={[
-          <Button
-            key='reconnect'
-            loading={isReconnecting}
-            onClick={() => attemptReconnect()}
-          >
-            Reconnect
-          </Button>
-        ]}
+        footer={
+          !isReconnecting
+            ? [
+                <Button
+                  key='reconnect'
+                  loading={isReconnecting}
+                  onClick={() => attemptReconnect()}
+                >
+                  Reconnect
+                </Button>
+              ]
+            : false
+        }
       >
-        <Flex vertical gap='middle'>
-          <Text>
-            {isReconnecting
-              ? 'Reconnecting to the API server...'
-              : `Lost connection to the API server. Reconnecting in ${reconnectSecondsRemaining} second${
-                  reconnectSecondsRemaining === 1 ? '' : 's'
-                }...`}
-          </Text>
-          <ProgressDisplay
-            percent={isReconnecting ? 0 : 100 - reconnectProgress}
-            showInfo={false}
-            status={'exception'}
-          />
-        </Flex>
+        {!isReconnecting ? (
+          <Flex vertical gap='middle'>
+            <Text>
+              {isReconnecting
+                ? 'Reconnecting to the API server...'
+                : `Lost connection to the API server. Reconnecting in ${reconnectSecondsRemaining} second${
+                    reconnectSecondsRemaining === 1 ? '' : 's'
+                  }...`}
+            </Text>
+            <ProgressDisplay
+              percent={isReconnecting ? 0 : 100 - reconnectProgress}
+              showInfo={false}
+              status={'exception'}
+            />
+          </Flex>
+        ) : (
+          <Space size={'middle'}>
+            <LoadingOutlined />
+            <Text style={{ margin: 0 }}>Reconnecting, please wait...</Text>
+          </Space>
+        )}
       </Modal>
       <Modal
         title={