fix: progressive loading on small screen fixes

[jenniferarnesen]

Fixed:

• When initial load is on small screen, all items were loading regardless of whether they were in the loading area buffer zone. With the fix, the ProgressiveLoadingContainer wont be rendered until all the grid layouts (small and large) have been calculated. (problem was that the ProgLoadingContainer was calculating position before the items had finished laying out)
• After the above point was fixed there was another problem that when switching from portrait->landscape, items that moved into the viewport didn't load, since ProgressiveLoadingContainer only set up a scroll listener. (items get moved up by ReactGridLayout because the grid recalculates the css transform property). To fix this, a MutationObserver was added to observe changes to the style of the grid item (assumption is that it is the transform property that is updated. Other possible style changes are width and height. Either of those changing would also suggest that the item had moved). This also fixes a pre-existing bug in Edit mode where, if you delete items and unloaded items from below on the dashboard move up into the viewport, they didn't get loaded. Note that the observer is only observing for unloaded items.

Before: Small screen - portrait->landscape - notice that all items are already loaded

sm.sc.loading.before.mov

After: small screen portrait->landscape - progressive loading works

sm.sc.loading.after.mov

Before: edit mode - unloaded items don't load when moved into viewport (as items above it are deleted)

prog.loading.edit.mode.before.mov

After: edit mode - unloaded items load when moved into viewport

prog.loading.edit.mode.after.mov

[dhis2-bot]

🎉 This PR is included in version 31.13.6 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀