Refactor loading actions

[adityagarg06]

Progress on #2042
Changes:

• Used the createSlice to create the loading reducer.
• Deleted the loader action file as createSlice automatically creates actions for the reducer.
• Removed the loader action constants.
• Changed the import path for loader actions in assets.js, collections.js, and projects.js.
• Connected the Legal.jsx to redux to use the loading state from the redux store instead of handling it locally.
• Improved the loading state in AddToCollectionList and AddToCollectionSketchList.
• Replaced the action types related to loading in the projects.unit.test.js file.

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[lindapaiste]

This is good stuff but I think that I need to explain my // TODO: improve loading state comment. We have a single state.loading for the entire app. It doesn't tell us what is loading. In the long term we would want to know that this specific thing is loading, possibly with RTK query? As a short-term bandaid fix I put in the hasLoadedData state and the more complicated check of const showLoader = loading && !hasLoadedData;. This prevents a situation where the loader shows up due to some unrelated API call elsewhere on the page.

There was a situation that was previously occurring where the sketch list would go into a loading state when you clicked the "add to collection" dropdown, as the "Add to collection" modal has its own API call which sets the global state.loading to true. TBH the two components where you changed it are probably fine? Since those are the secondary API calls. But I was putting that check in on all the components that I refactored to be on the safe side.

[lindapaiste]

Either of these should work:

{ type: startLoader.type },

startLoader(),

startLoader() is an action creator, so it's a function that returns the action. If you just call that function without dispatching you will get the value { type: 'loading/startLoader' }.

[lindapaiste]

Check out the source of the getCollections thunk. I think that it dispatches startLoader and stopLoader on its own already?

[lindapaiste]

This one is subjective. Personally I would use the local component state. The policy loading state is not used in any other component so I don't think that it needs to be in a global Redux state.

[adityagarg06]

I have reverted the changes made in the AddToCollectionList, AddToCollectionSketchList, and Legal. I will create a new PR to implement them using the RTK query. Also made the change that you requested in the project.test file. Thanks for the feedback.