LoadingPanel

3p-core v2.1.4

---

3p-core / LoadingPanel

Variable: LoadingPanel

const LoadingPanel: React.FunctionComponent<ILoadingPanelProps>

A wrapper around Fluent UI's Panel component that integrates a blocking loader using Notiflix. Allows programmatic control of the loading overlay.

Remarks

This component adds a Block.pulse overlay when loading is true and removes it otherwise. Consumers can also control the loading overlay via the panelBlockRef.

The component generates a unique class name internally to scope the blocking behavior to the panel instance.

Examples

Minimal usage:

<LoadingPanel isOpen={true} onDismiss={() => setOpen(false)} />

With loading and panelBlockRef:

const panelRef = useRef<LoadingPanelBlockHandle>(null);

return (
  <>
    <LoadingPanel isOpen={true} panelBlockRef={panelRef} loading={isLoading} />
    <button onClick={() => panelRef.current?.change('Loading updated...')}>Update Message</button>
  </>
);