webdev01/utils/LoadingPopup.tsx

// LoadingPopup.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './LoadingPopup.css'; // Use the styles you've provided earlier or updated

const LoadingPopup = ({ message = "Loading data, please wait..." }) => {
  return ReactDOM.createPortal(
    <div className="loading-overlay">
      <div className="loading-box">
        <div className="loading-title">Please Wait..</div>
        <div className="spinner"></div>
        <div className="loading-message">{message}</div>
      </div>
    </div>,
    document.body
  );
};

export default LoadingPopup;