wait-component

Component for handling async rendering with transient states.

Installation

npm i wait-component

Usage

Wait with render prop

Use the render prop pattern when you need to use the resolved value from the promise.

import { Wait } from 'wait-component';

function App() {
  const promise = fetchUser();

  return (
    <Wait
      promise={promise}
      transient={{ name: "Loading..." }}
      render={(user, pending) => <div>{user.name}</div>}
      fallback={null}
    />
  );
}

Props:

• promise: Promise to wait for
• render: Function that receives the resolved value (or transient value during fallback) and pending flag
• transient: Optional value to display during loading
• fallback: Fallback to render if transient is undefined
• always: If true, always calls render during fallback

Wait with children

Use the children pattern when you just need to wait for the promise to complete, without using the resolved value.

import { Wait } from 'wait-component';

function App() {
  const promise = saveData();

  return (
    <Wait promise={promise} fallback={<div>Saving...</div>}>
      <div>Save completed!</div>
    </Wait>
  );
}

Props:

• promise: Promise to wait for completion
• children: Content to render after the promise resolves
• fallback: Fallback to render during loading

License

MIT