ILoadingProps

@spartanfx/react v1.0.1

---

@spartanfx/react / ILoadingProps

Interface: ILoadingProps

Props for the Loading component.

Remarks

• When loading is true, a global Notiflix loading overlay is shown.
• If multiple Loading instances are mounted at the same time, a reference counter ensures the overlay remains visible until all instances unmount or set loading to false.
• The message is shown inside the overlay; it updates reactively while loading is true.

Examples

// Minimal usage: show a loader while data is fetched
export function Page() {
  const [busy, setBusy] = React.useState(false);
  React.useEffect(() => {
    setBusy(true);
    fetch('/api/data').finally(() => setBusy(false));
  }, []);
  return (
    <>
      <Loading loading={busy} />
      <main>...</main>
    </>
  );
}

// Multiple loaders: overlay stays visible until ALL are done
export function ComplexFlow() {
  const [stepA, setA] = React.useState(false);
  const [stepB, setB] = React.useState(false);
  React.useEffect(() => {
    setA(true); setB(true);
    Promise.all([doA(), doB()]).finally(() => { setA(false); setB(false); });
  }, []);
  return (
    <>
      <Loading loading={stepA} message="Processing step A…" />
      <Loading loading={stepB} message="Processing step B…" />
      <section>...</section>
    </>
  );
}

Properties

Property	Type	Default value	Description
loading	boolean	undefined	Whether to show the global loading overlay. Remarks - Mounting with loading=true increments an internal loader counter. - When set to false (or the component unmounts), the counter is decremented. - The overlay is removed only when the counter reaches zero.
message?	string	'' (no message)	Message displayed inside the overlay. Remarks - Changing this prop while loading is true updates the visible message in place. - If several loaders are active, the most recently updated message is shown globally.