In my React app, I am using RTK query to fetch data. I have 10+ API endpoints and a route for each one of the endpoints.
I want to show a horizontal line at the top of the page to indicate that the data fethcing is going on.
At the moment, I have done this.
const ArticlePage = () => {
const { id} = useParams();
const { data, isFetching, isLoading } = useFetchArticleByIdQuery(id);
return (
<Layout>
{(isFetching || isLoading) && <LinearProgressIndicator />}
<PageHead />
{data && <ArticleContent article={data} />}
</Layout>
);
};
I have also tried this.
const ArticlePage = () => {
const { id} = useParams();
const { data, isFetching, isLoading } = useFetchArticleByIdQuery(id);
return (
<Layout>
<LinearProgressIndicator shouldDisplay={(isFetching || isLoading)} />
<PageHead />
{data && <ArticleContent article={data} />}
</Layout>
);
};
It is cumbersome ot use the same thing on all the 10+ routes. So is there any way to show <LinearProgressIndicator /> once for all the 10+ endpoints?
You can write a selector for that:
const isLoading = useAppSelector((state) => {
return Object.values(state.api.queries).some((query) => {
return query && query.status === QueryStatus.pending;
});
});