hunk.code_window:   useMemo,
     useState,
   } from 'react';
   import { useCurrentSyncEngine } from '../../../../hooks/current/use-current-sync-engine';
   import { useSystemOnline } from '../../../../hooks/use-system-online';
   import type { AllWorkspace } from '../../../../shared';
   import { Loading } from './loading-icon';
   import {
  
hunk.labels: keep keep keep keep replace keep keep keep keep
hunk.file_path: packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
hunk.type: replace
file: import { useAtomValue } from 'jotai';
  import { type ReactNode, useEffect, useState } from 'react';
  
  import { Loading } from '../../ui/loading';
  import * as styles from './index.css';
  import { globalLoadingEventsAtom } from './index.jotai';
  
  export {
    type GlobalLoadingEvent,
    pushGlobalLoadingEventAtom,
    resolveGlobalLoadingEventAtom,
  } from './index.jotai';
  
  export function GlobalLoading(): ReactNode {
    const globalLoadingEvents = useAtomValue(globalLoadingEventsAtom);
    const [loading, setLoading] = useState(false);
  
    useEffect(() => {
      if (globalLoadingEvents.length) {
        setLoading(true);
      } else {
        setLoading(false);
      }
    }, [globalLoadingEvents]);
  
    if (!globalLoadingEvents.length) {
      return null;
    }
    return (
      <div className={styles.globalLoadingWrapperStyle} data-loading={loading}>
        <Loading size={20} />
      </div>
    );
  }
  