Improve Tool Loading Performance

[da1nerd]

Story Explanation

This is related to https://github.com/unfoldingWord-dev/translationCore/issues/5093 but I am opening a new issue since this covers a very specific optimization that could be performed.

Loading a tool is very slow. Make it fast!

User Story

As a regular non-techy-user, I want tools to open quickly so that I can get things done.

Features / Specifications

A large portion of the tool loading happens before the tools components even mount. And most of that time is spent re-rendering react components as state changes during the loading process. The primary reason for this is many of the components in tC are tightly and broadly coupled to the state in redux. So all the components are being re-rendered due to unrelated changes.

This can be resolved by replacing broad sweeping redux bindings with specific selectors so that only data for the the specific container is loaded.

The implementation will look sort of like this:

1. create new containers for components that need data to function
2. separate data logic from monolithic containers
3. put data logic into the appropriate containers.

Note: this would not only improve the performance of tool loading but the application overall.

Definition of Done

No react components are re-rendered while the tool loads.

Screenshots

The below example is the performance of loading Acts. You can see that most of the first 6 seconds is spent re-rendering. Optimistically we should be able to get the total loading down to 3 seconds.

[da1nerd]

@jag3773 @benjore @cckozie ^ I noticed this while improving the navigation performance.

Be warned the above would require touching probably almost all of the components/containers in tC. If we were to embark on this (which I think we should eventually) we should take it in stages to avoid a bottle neck.