Architecural React.js : Global Loader UX Middleware in React.js with React Context API and Redux js Toolkit

Recently just published new gist how to create global loader UX Middleware in React.js with React Context API > and Redux js Toolkit.

Check out the codes : https://gist.github.com/agilworld/5d74022f76d5d8be1a2d224aa12a59aa

Brief description

Those codes in gist how to make automatically show loader UX whatever dispatch on based on Redux action lifecycles (pending, fulfilled, rejected).

• pending → request started
• fulfilled → request succeeded
• rejected → request failed

because createAsyncThunk generates these action types automatically, the middleware can detect them generically instead of manually handling every API request.

Why with Redux Middleware

Redux middleware acts as a centralized interception layer between dispatch and reducer execution. Because every async thunk lifecycle (pending, fulfilled, rejected) flows through middleware, it becomes the perfect place to automate global UI behaviors like loaders, notifications, analytics, or error tracking without polluting component logic.

The Benefit

Some reason here why we used Middleware in Redux

Decoupling UI from Logic

how we do components that need to show a loading indicator just consume the useLoading hook; they don't need to know what is loading or how to dispatch Redux actions.

Automatic Loading Indicators

The Redux middleware automatically manages the loading state for any Redux Toolkit createAsyncThunk (or similar async actions that follow the /pending, /fulfilled, /rejected convention), reducing boilerplate.

Improves Scalability

In medium-to-large React applications, manually handling loading state across many pages often creates duplicated boilerplate and inconsistent UX. Centralizing loading orchestration through middleware ensures a uniform loading behavior across the entire application.

Honestly, maybe these codes has been already emerges in many code platform out there, but I want to share side thing.

Some reason why React Context and Redux Middleware used togther

• Redux middleware manages loading events globally
• Context provides lightweight consumption to React components
• Components consume useLoading() without coupling themselves to Redux store structure

Drawbacks

In that case, a few things to be inadequacy

Concurrent requests issue

If multiple async actions run simultaneously:

• request A starts
• request B starts
• request A finishes

the loader may disappear too early while request B is still pending.

Some way could be bad UX

Global loaders should be used selectively. Full-screen blocking loaders for every request can reduce perceived performance and interrupt user interaction. In many cases, skeleton loaders or scoped loading indicators provide a better UX.

Summary

Literally, the codes was generated by AI agent, not pure by my hands, why I need to concern it the codes. We can't just ignore the heavy flow of AI tools, but as software engineers now utilize AI tools just like a farmer controls a drone to sow his rice fields.

Software engineers must now have an architectural mindset, code does not have to be built with our hands, how do we build a building part by organizing a detailed technical flow with AI prompts, but don't leave checking and reviewing codes as your expertises and experiences. Keep learning and create stunnning with AI