loading spinner while requesting data in backend

[SujalLama]

No description provided.

[lmmrssa]

One simple place to start with

If you click on library menu or go to url http://github.planetfarms.io:3000/library
On page load of library it trigger action to fetch library resources

planetfarms/src/screens/library/Library.jsx

Line 41 in ee470b4

if (!search) dispatch(listResources('', pageNumber))

Which will call action

planetfarms/src/actions/resourceActions.js

Line 15 in ee470b4

export const listResources = ({ sort, pageNumber }) => async (dispatch) => {

Action which fetch the resources of library and will intiate state of loading by reducer

planetfarms/src/actions/resourceActions.js

Line 17 in ee470b4

dispatch({ type: RESOURCE_LIST_REQUEST })

After data returned will call reducer

planetfarms/src/actions/resourceActions.js

Line 22 in ee470b4

dispatch({ type: RESOURCE_LIST_SUCCESS, payload: data })

All these reducers are under

planetfarms/src/reducers/resourceReducers.js

Line 14 in ee470b4

export const resourceListReducer = (state = { resources: [] }, action) => {

payload returned by reducers in action will be grabbed under

planetfarms/src/screens/library/Library.jsx

Line 16 in ee470b4

const resourceList = useSelector((state) => state.listResources)

Here we can get loading and use that value somewhere inside

planetfarms/src/screens/library/Library.jsx

Line 56 in ee470b4

<DashboardLayout title='Library'>

To display or hide loading icon
For loader you can use some package like
https://www.npmjs.com/package/react-loader-spinner