Banner Image

Show hide loading screen using redux

Dashrath Singh
April 27, 2022
0 Minutes Read

scroll

down

Banner Image

Looking for other services or solutions?

ux/ui image
Explore our services

IN A nutshell

we need to show loading component when we are fetching the Data from rest APIs. we can show Image or video or React component with svgs During the fetching task.

Overview:  we need to show loading component when we are fetching the Data from rest APIs. we can show Image or video or React component with svgs During the fetching task.

  •  here is an example of loading component made by me in react native.

 

Here note that we are using window from dimensions to get the actual height of the view component we give that height to the view of loading component. So that it will take up the whole screen.

Here is how it looks.

  • To Use it with redux here are the steps

Use a component like this in your app should be conditionally rendered.

  • On start of a Saga also define a loading Value in a  reducer slice.  like this
  • Make a selector to access this loading value in your component
  •  
  • Make sure to make the loading false on fetch completion.

Here is my saga for reference.

0 Shares
Tweet
Share
Share
Pin