Function LoadingModal

LoadingModal - Full-screen loading overlay with spinner and message

A simple but essential component that displays a loading state during async operations like connecting to a room, processing recordings, or loading resources. Provides a semi-transparent overlay with a centered spinner and customizable loading message.

Features:

• Full-screen overlay blocking user interaction
• Animated FontAwesome spinner (customizable icon)
• Customizable loading text/message
• Adjustable overlay opacity and colors
• Optional spinner visibility toggle
• Custom render hooks for complete flexibility
• Supports custom spinner components

import React, { useState } from 'react';
import { LoadingModal } from 'mediasfu-reactjs';

function App() {
  const [isLoading, setIsLoading] = useState(false);

  const handleConnect = async () => {
    setIsLoading(true);
    await connectToRoom();
    setIsLoading(false);
  };

  return (
    <>
      <button onClick={handleConnect}>Connect</button>
      <LoadingModal
        isVisible={isLoading}
        backgroundColor="rgba(0, 0, 0, 0.7)"
        displayColor="#3b82f6"
        loadingText="Connecting to room..."
      />
    </>
  );
}
Copy

import { LoadingModal } from 'mediasfu-reactjs';

function BrandedLoading({ isVisible, message }) {
  return (
    <LoadingModal
      isVisible={isVisible}
      backgroundColor="rgba(15, 23, 42, 0.95)"
      displayColor="#22c55e"
      showSpinner={false}
      loadingText={
        <div style={{ textAlign: 'center' }}>
          <div style={{
            width: 60,
            height: 60,
            margin: '0 auto 20px',
            borderRadius: '50%',
            border: '4px solid #22c55e',
            borderTopColor: 'transparent',
            animation: 'spin 1s linear infinite',
          }} />
          <p style={{ fontSize: 18, fontWeight: 600 }}>{message}</p>
        </div>
      }
    />
  );
}
Copy

import { LoadingModal } from 'mediasfu-reactjs';

function ProgressLoading({ isVisible, progress, message }) {
  return (
    <LoadingModal
      isVisible={isVisible}
      backgroundColor="rgba(0, 0, 0, 0.8)"
      displayColor="#3b82f6"
      renderContent={({ defaultContent }) => (
        <div style={{
          background: 'white',
          padding: 40,
          borderRadius: 16,
          boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
          textAlign: 'center',
          minWidth: 300,
        }}>
          <div style={{
            width: 80,
            height: 80,
            margin: '0 auto 20px',
            borderRadius: '50%',
            border: '6px solid #e2e8f0',
            borderTopColor: '#3b82f6',
            animation: 'spin 1s linear infinite',
          }} />
          <h3 style={{ marginBottom: 16, color: '#1e3a8a' }}>{message}</h3>
          <div style={{
            width: '100%',
            height: 8,
            background: '#e2e8f0',
            borderRadius: 4,
            overflow: 'hidden',
          }}>
            <div style={{
              width: `${progress}%`,
              height: '100%',
              background: 'linear-gradient(90deg, #3b82f6, #8b5cf6)',
              transition: 'width 0.3s ease',
            }} />
          </div>
          <p style={{ marginTop: 12, color: '#64748b', fontSize: 14 }}>
            {progress}% complete
          </p>
        </div>
      )}
    />
  );
}
Copy

import { MediasfuGeneric, LoadingModal } from 'mediasfu-reactjs';

const uiOverrides = {
  loadingModal: {
    render: (props) => (
      <LoadingModal
        {...props}
        backgroundColor="rgba(15, 23, 42, 0.9)"
        displayColor="#22c55e"
        loadingText={
          <div style={{ textAlign: 'center' }}>
            <p style={{ fontSize: 20, fontWeight: 700, marginBottom: 8 }}>
              Please wait
            </p>
            <p style={{ fontSize: 14, opacity: 0.8 }}>
              Setting up your experience...
            </p>
          </div>
        }
        spinnerProps={{ size: '3x', spin: true }}
      />
    ),
  },
};

<MediasfuGeneric uiOverrides={uiOverrides} />;
Copy