etherpad-lite/admin/src/utils/LoadingScreen.tsx

import {useStore} from "../store/store.ts";
import * as Dialog from '@radix-ui/react-dialog';
import ReactComponent from './brand.svg?react';
export const LoadingScreen = ()=>{
    const showLoading = useStore(state => state.showLoading)

    return <Dialog.Root open={showLoading}><Dialog.Portal>
        <Dialog.Overlay className="loading-screen fixed inset-0 bg-black bg-opacity-50 z-50 dialog-overlay" />
        <Dialog.Content  className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 dialog-content">
            <div className="flex flex-col items-center">
                <div className="animate-spin w-16 h-16 border-t-2 border-b-2 border-[--fg-color] rounded-full"></div>
                <div className="mt-4 text-[--fg-color]">
                    <ReactComponent/>
                </div>
            </div>
        </Dialog.Content>
    </Dialog.Portal>
    </Dialog.Root>
}