chrome-extension/components/LoadingContext.tsx

// src/context/LoadingContext.tsx
import React, { createContext, useContext, useState, ReactNode } from 'react';
import { Loading } from '@alifd/next';

interface LoadingContextType {
  showLoading: (message?: string) => void;
  hideLoading: () => void;
  isLoading: boolean;
}

const LoadingContext = createContext<LoadingContextType | undefined>(undefined);

export const LoadingProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [isLoading, setIsLoading] = useState(false);
  const [message, setMessage] = useState<string>('');

  const showLoading = (message = '') => {
    setMessage(message);
    setIsLoading(true);
  };

  const hideLoading = () => {
    setIsLoading(false);
    setMessage('');
  };

  return (
    <LoadingContext.Provider value={{ showLoading, hideLoading, isLoading }}>
      <Loading visible={isLoading} fullScreen tip={message}>
        {children}
      </Loading>
    </LoadingContext.Provider>
  );
};

export const useLoading = () => {
  const context = useContext(LoadingContext);
  if (!context) {
    throw new Error('useLoading must be used within a LoadingProvider');
  }
  return context;
};