text: import React, { Suspense } from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';
  import Provider from './context/Provider';
  import { BrowserRouter } from 'react-router-dom';
  import * as serviceWorkerRegistration from './serviceWorkerRegistration';
  import { CircularProgress } from '@mui/material';
  import UserContextProvider from './context/UserContext';
  
  ReactDOM.render(
    <React.StrictMode>
      <Provider>
        <Suspense
          fallback={
            <div className="d-flex justify-content-center mt-5 pt-5">
              <CircularProgress color="inherit" />
            </div>
          }
        >
          <BrowserRouter>
            <UserContextProvider>
              <App />
            </UserContextProvider>
          </BrowserRouter>
        </Suspense>
      </Provider>
    </React.StrictMode>,
    document.getElementById('root')
  );
  
  // If you want to start measuring performance in your app, pass a function
  // to log results (for example: reportWebVitals(console.log))
  // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
  serviceWorkerRegistration.register();
  
  reportWebVitals();
  