Function Loading

components/dash-core-components/src/components/Loading.tsx:82–183

({
    children,
    display = 'auto',
    color = 'var(--Dash-Fill-Interactive-Strong)',
    id,
    className,
    style,
    parent_className,
    parent_style,
    overlay_style,
    fullscreen,
    debug,
    show_initially = true,
    type: spinnerType = 'default',
    delay_hide = 0,
    delay_show = 0,
    target_components,
    custom_spinner,
}: LoadingProps)

    };

function Loading({
    children,
    display = 'auto',
    color = 'var(--Dash-Fill-Interactive-Strong)',
    id,
    className,
    style,
    parent_className,
    parent_style,
    overlay_style,
    fullscreen,
    debug,
    show_initially = true,
    type: spinnerType = 'default',
    delay_hide = 0,
    delay_show = 0,
    target_components,
    custom_spinner,
}: LoadingProps) {
    const ctx = window.dash_component_api.useDashContext();

    const loading = ctx.useSelector(
        loadingSelector(ctx.componentPath, target_components),
        equals
    );

    const [showSpinner, setShowSpinner] = useState(show_initially);
    const dismissTimer = useRef<number | void>();
    const showTimer = useRef<number | void>();

    const containerStyle: React.CSSProperties = useMemo(() => {
        if (showSpinner) {
            return {visibility: 'hidden', ...overlay_style, ...parent_style};
        }
        return parent_style ?? {};
    }, [showSpinner, parent_style]);

    useEffect(() => {
        if (display === 'show' || display === 'hide') {
            setShowSpinner(display === 'show');
            return;
        }

        if (loading) {
            // if component is currently loading and there's a dismiss timer active
            // we need to clear it.
            if (dismissTimer.current) {
                dismissTimer.current = window.clearTimeout(
                    dismissTimer.current
                );
            }
            // if component is currently loading but the spinner is not showing and
            // there is no timer set to show, then set a timeout to show
            if (!showSpinner && !showTimer.current) {
                showTimer.current = window.setTimeout(() => {
                    setShowSpinner(true);
                    showTimer.current = undefined;
                }, delay_show);