Loading

@spartanfx/react v1.0.1

---

@spartanfx/react / Loading

Variable: Loading

const Loading: React.FC<ILoadingProps>

React component that coordinates a global Notiflix loading overlay using a reference counter.

Param

ILoadingProps controlling visibility and message.

Returns

null (this component renders nothing to the React tree)

Remarks

Behavior & lifecycle

• When loading transitions to true, the component calls setLoading with the current message and registers a cleanup that calls removeLoading on unmount or when loading becomes false.
• While loading remains true, changes to message call an internal message update so the overlay text updates without flicker.

Multiple instances

• Each mounted instance with loading=true increments the global counter.
• The overlay is hidden only when the last active instance unmounts or disables loading.

Rendering

• The component returns null and has no visual DOM output; it controls a global overlay via Notiflix.

Examples

// Minimal: toggle with state
export function ButtonWithLoader() {
  const [busy, setBusy] = React.useState(false);
  const onClick = async () => {
    setBusy(true);
    try { await doSomething(); } finally { setBusy(false); }
  };
  return (
    <>
      <Loading loading={busy} message="Working…" />
      <button onClick={onClick}>Run</button>
    </>
  );
}

// Advanced: combine declarative and imperative flows in a form submit
export function Form() {
  const [submitting, setSubmitting] = React.useState(false);
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading('Submitting…');
    setSubmitting(true);
    try {
      await submit();
    } finally {
      setSubmitting(false);
      removeLoading();
    }
  };
  return (
    <>
      <Loading loading={submitting} message="Submitting your data…" />
      <form onSubmit={handleSubmit}></form>
    </>
  );
}