@datalayer/core/lib/hooks/layouts/LayoutBackdrop.js

[](https://datalayer.io)

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { useEffect } from 'react';
import { Heading, Box, Spinner } from '@primer/react';
import { useBackdrop } from '..';
import { useLayoutStore } from '../../state';
const BackdropContent = (props) => {
    const { backdropDisplay } = props;
    return (_jsx(Box, { style: { zIndex: 10999 }, children: backdropDisplay.message ? (_jsxs(Box, { display: "flex", style: { alignItems: 'center' }, children: [_jsx(Box, { mr: 3, children: _jsx(Spinner, { size: "large" }) }), _jsx(Box, { children: _jsx(Heading, { sx: { fontSize: 5, color: 'white' }, children: backdropDisplay.message }) })] })) : (_jsx(Spinner, { size: "large" })) }));
};
export const LayoutBackdrop = () => {
    const { backdrop } = useLayoutStore();
    const { displayBackdrop, closeBackdrop } = useBackdrop();
    useEffect(() => {
        if (backdrop && backdrop.open) {
            displayBackdrop(() => _jsx(BackdropContent, { backdropDisplay: backdrop }));
        }
        else {
            closeBackdrop();
        }
    }, [backdrop]);
    return _jsx(_Fragment, {});
};
export default LayoutBackdrop;