fix: fetch visualization always when caching (DHIS2-17509) (#2986)

A previous fix for an item flashing issue caused the offline cache to
lack the request for the visualizations.
The fix looks at the recording state and triggers a fetch that can be
recorded.

src/components/Item/VisualizationItem/Item.js

@@ -114,6 +114,15 @@ class Item extends Component {
         this.setState({ configLoaded: true })
     }
 
+    componentDidUpdate(prevProps) {
+        if (
+            this.props.isRecording &&
+            this.props.isRecording !== prevProps.isRecording
+        ) {
+            apiFetchVisualization(this.props.item)
+        }
+    }
+
     isFullscreenSupported = () => {
         const el = getGridItemElement(this.props.item.id)
         return !!(el?.requestFullscreen || el?.webkitRequestFullscreen)
@@ -322,6 +331,7 @@ Item.propTypes = {
     dashboardMode: PropTypes.string,
     gridWidth: PropTypes.number,
     isEditing: PropTypes.bool,
+    isRecording: PropTypes.bool,
     item: PropTypes.object,
     itemFilters: PropTypes.object,
     setActiveType: PropTypes.func,

src/pages/view/ItemGrid.js

@@ -109,6 +109,7 @@ const ResponsiveItemGrid = ({ dashboardId, dashboardItems }) => {
                     item={item}
                     gridWidth={gridWidth}
                     dashboardMode={VIEW}
+                    isRecording={forceLoad}
                     onToggleItemExpanded={onToggleItemExpanded}
                 />
             </ProgressiveLoadingContainer>