fix: add 5s delay when session expiration datetime is over (#2910)

**Changes:**
This PR resolves [backend.ai#3180](lablup/backend.ai#3180)
Added a 5-second timeout delay before reloading the page when the login session expires in the LoginSessionExtendButton component. This ensures the page reload is properly applied after session expiration. Also added a disabled state to prevent button interaction during expiration.

**Rationale:**
The immediate page reload was causing issues with proper application of the reload. The timeout ensures the system has enough time to process the session expiration before triggering the reload action. The disabled state prevents users from attempting to extend an already expired session.

**Impact:**
Users will experience a 5-second delay between their session expiring and the page reloading, providing a more reliable session expiration behavior in both Electron and browser environments. The extend session button will be disabled during this period.

**Checklist:**
- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

react/src/components/BAIIntervalView.tsx

@@ -11,7 +11,7 @@ const BAIIntervalView = <T,>({
 }: {
   callback: () => T;
   render?: RenderProp<T>;
-  delay: number;
+  delay: number | null;
   triggerKey?: string;
 }) => {
   const value = useIntervalValue(callback, delay, triggerKey);

react/src/components/LoginSessionExtendButton.tsx

@@ -7,7 +7,7 @@ import { ClockCircleOutlined } from '@ant-design/icons';
 import { Button, ConfigProvider, Grid, Tooltip } from 'antd';
 import { default as dayjs } from 'dayjs';
 import { Repeat2Icon } from 'lucide-react';
-import React, { useTransition } from 'react';
+import React, { useTransition, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface LoginSessionExtendButtonProps {}
@@ -19,6 +19,7 @@ const LoginSessionExtendButton: React.FC<
   const baiRequestWithPromise = useBaiSignedRequestWithPromise();
   const [isPending, startTransition] = useTransition();
   const [fetchKey, updateFetchKey] = useUpdatableState('first');
+  const [isDisabled, setIsDisabled] = useState(false);
 
   const gridBreakpoint = Grid.useBreakpoint();
 
@@ -42,22 +43,27 @@ const LoginSessionExtendButton: React.FC<
           const diff = dayjs(data?.expires).diff(dayjs(), 'seconds');
           const duration = dayjs.duration(Math.max(0, diff), 'seconds');
           const days = Math.floor(duration.asDays());
-          if (duration.asSeconds() <= 0) {
-            // @ts-ignore
-            if (globalThis.isElectron) {
+          const isExpired = duration.asMilliseconds() <= 0;
+          setIsDisabled(isExpired);
+          if (isExpired) {
+            // FIXME: temporally add timeout (5s) for page reload to be applied
+            setTimeout(() => {
               // @ts-ignore
-              globalThis.location.href = globalThis.electronInitialHref;
-            } else {
-              globalThis.location.reload();
-            }
+              if (globalThis.isElectron) {
+                // @ts-ignore
+                globalThis.location.href = globalThis.electronInitialHref;
+              } else {
+                globalThis.location.reload();
+              }
+            }, 5000);
           }
           return gridBreakpoint.lg
             ? `${days ? days + 'd ' : ''}${duration.format('HH:mm:ss')}`
             : days
               ? days + 'd'
               : duration.format('HH:mm:ss');
         }}
-        delay={100}
+        delay={isDisabled ? null : 100}
         render={(text) => {
           return (
             <Tooltip title={t('general.RemainingLoginSessionTime')}>
@@ -83,6 +89,7 @@ const LoginSessionExtendButton: React.FC<
             loading={isPending}
             onClick={() => startTransition(() => updateFetchKey())}
             icon={<Repeat2Icon />}
+            disabled={isDisabled}
           />
         </Tooltip>
       </ConfigProvider>

react/src/hooks/useIntervalValue.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from 'react';
  * @param callback The function to be executed at the specified interval.
  * @param delay The delay (in milliseconds) between each execution of the callback function. If `null`, the interval is cleared(pause).
  */
-export function useInterval(callback: () => void, delay: number) {
+export function useInterval(callback: () => void, delay: number | null) {
   const savedCallback = useRef<() => any>();
 
   useEffect(() => {
@@ -35,7 +35,7 @@ export function useInterval(callback: () => void, delay: number) {
  */
 export const useIntervalValue = (
   calculator: () => any,
-  delay: number,
+  delay: number | null,
   triggerKey?: string,
 ) => {
   const [result, setResult] = useState(calculator());