Overlay loading state container

[veekeys]

• Set the standard of when to use vs not
• Provide css for overlay loading element both: whole viewport and per container

[maxime4000]

It will need some refactoring, but here some free working code :

@import "~@bentley/itwinui/scss/style/index";
@include themed();
@mixin SpinnerClass($backgroundColor, $pointerEvent: auto) {
    width: calc(100%);
    height: calc(100%);
    position: absolute;
    background-color: $backgroundColor;
    top: 0;
    left: 0;
    z-index: 500;
    border-radius: 4px;
    pointer-events: $pointerEvent;

    .SpinnerMiddleContainer {
        position: relative;
        top: 50%;
        -ms-transform: translate(0%, -50%);
        transform: translate(0%, -50%);

        .iui-progress-indicator-radial {
            display: block;
            height: 50px;
            width: unset;
        }

        .SpinnerTextContainer {
            top: 48%;
            padding: 19px;
            text-align: center;
            font-size: 18px;
        }
    }
}
.SpinnerOverlay {
    $backgroundColor: rgba(t(iui-color-background-1-rgb), t(iui-opacity-2));
    $pointerEvent: auto;
    @include SpinnerClass($backgroundColor, $pointerEvent);
}

.SpinnerNoOverlay {
    $backgroundColor: #00000000; //rgba(t($iui-color-background-1-rgb), t(iui-opacity-2))
    $pointerEvent: none;
    @include SpinnerClass($backgroundColor, $pointerEvent);
}

And the React Component :

import React from "react";
import cx from "classnames";
import { ProgressRadial } from "@bentley/itwinui-react/esm/core";

import "./OverlaySpinner.scss";

interface Props {
    isShown: boolean;
    isNoOverlay?: boolean;
    text?: string;
}

export const OverlaySpinner = (props: Props) => {
    const { isShown, isNoOverlay = false, text } = props;
    return (
        <>
            {isShown && (
                <div className={cx(!isNoOverlay ? "SpinnerOverlay" : "SpinnerNoOverlay")}>
                    <div className="SpinnerMiddleContainer">
                        <ProgressRadial indeterminate />
                        {text && <div className="SpinnerTextContainer">{text}</div>}
                    </div>
                </div>
            )}
        </>
    );
};