
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Complex Loader Management for React.
Read the Medium post "Managing Complex Waiting Experiences on Web UIs".
use-wait is a React Hook helps to manage multiple loading states on the page without any conflict. It's based on a very simple idea that manages a Array
with multiple loading states. The built-in loader component listens its registered loader and immediately become loading state.
React.Suspense
?:React has its own Suspense feature to manage all the async works. For now it only supports code-splitting (not data-fetching).
useWait
allows you to manage waiting experiences much more explicitly and not only for Promised/async patterns but also complete loading management.
Here's a quick overview that what's useWait
for:
import { useWait, Waiter } from 'use-wait';
function A() {
const { isWaiting } = useWait();
return <div>{isWaiting('creating user') ? "Creating User..." : "Nothing happens"}</div>;
}
function B() {
const { anyWaiting } = useWait();
return <div>{anyWaiting() ? "Something happening on app..." : "Nothing happens"}</div>;
}
function C() {
const { startWaiting, endWaiting, isWaiting } = useWait();
function createUser() {
startWaiting('creating user');
// Faking the async work:
setTimeout(() => {
endWaiting('creating user')
}, 1000);
}
return <button disabled={isWaiting("creating user")} onClick={createUser}>
<Wait on="creating user" fallback={<Spinner/>}>
Create User
</Wait>
</button>
}
ReactDOM.render(<Waiter><C/></Waiter>, document.getElementById("root"));
If you are a try and learn developer, you can start trying the use-wait now using codesandbox.io.
yarn add use-wait
import { Waiter, useWait } from 'use-wait'
function UserCreateButton() {
const { startWaiting, endWaiting, isWaiting, Wait } = useWait();
return (
<button
onClick={() => startWaiting("creating user")}
disabled={isWaiting("creating user")}
>
<Wait on="creating user" fallback={<div>Creating user!</div>}>
Create User
</Wait>
</button>
);
}
Waiter
Context ProviderAnd you should wrap your App
with Waiter
component. It's actually a Context.Provider
that provides a loading context to the component tree.
const rootElement = document.getElementById("root");
ReactDOM.render(
<Waiter>
<App />
</Waiter>,
rootElement
);
$ yarn add use-wait
# or if you using npm
$ npm install use-wait
use-wait provides some helpers to you to use in your templates.
anyWaiting()
Returns boolean value if any loader exists in context.
const { anyWaiting } = useWait();
return <button disabled={anyWaiting()}>Disabled while waiting</button>;
isWaiting(waiter String)
Returns boolean value if given loader exists in context.
const { isWaiting } = useWait();
return <button disabled={isWaiting('creating user')}>Disabled while creating user</button>;
startWaiting(waiter String)
Starts the given waiter.
const { startWaiting } = useWait();
return <button onClick={() => startWaiting('message')}>Start</button>;
endWaiting(waiter String)
Stops the given waiter.
const { end } = useWait();
return <button onClick={() => endWaiting('message')}>Stop</button>;
Wait
Componentfunction Component() {
const { Wait } = useWait();
return <Wait
on="the waiting message"
fallback={<div>Waiting...</div>}
>
The content after waiting done
</Wait>
}
Better example for a button
with loading state:
<button disabled={isWaiting('creating user')}>
<Wait
on='creating user'
fallback={<div>Creating User...</div>}>
Create User
</Wait>
</button>
With reusable loader components, you will be able to use custom loader components as example below. This will allow you to create better user loading experience.
function Spinner() {
return <img src="spinner.gif"/>;
}
Now you can use your spinner everywhere using waiting
attribute:
<button disabled={isWaiting('creating user')}>
<Wait
on='creating user'
fallback={<Spinner/>}>
Create User
</Wait>
</button>
createWaitingContext(context String)
To keep your code DRY you can create a Waiting Context
using createWaitingContext
.
function CreateUserButton() {
const { createWaitingContext } = useWait();
// All methods will be curried with "creating user" on.
const { startWaiting, endWaiting, isWaiting, Wait } = createWaitingContext('creating user');
function createUser() {
startWaiting()
setTimeout(endWaiting, 1000);
}
return <Button disabled={isWaiting()} onClick={createUser}>
<Wait fallback="Creating User...">
Create User
</Wait>
</Button>
}
Since use-wait based on a very simple idea, it can be implemented on other frameworks.
MIT © Fatih Kadir Akın
FAQs
Complex Loader Management for React Applications
We found that react-wait demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.