feat: limit dashboard preloading

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2025-02-07T10:20:57.831Z\n"
-"PO-Revision-Date: 2025-02-07T10:20:57.833Z\n"
+"POT-Creation-Date: 2025-02-26T12:30:51.331Z\n"
+"PO-Revision-Date: 2025-02-26T12:30:51.331Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -560,12 +560,12 @@ msgstr "Create a new dashboard with the + button."
 msgid "Your most viewed dashboards"
 msgstr "Your most viewed dashboards"
 
-msgid "No dashboards found. Use the + button to create a new dashboard."
-msgstr "No dashboards found. Use the + button to create a new dashboard."
-
 msgid "Requested dashboard not found"
 msgstr "Requested dashboard not found"
 
+msgid "No dashboards found. Use the + button to create a new dashboard."
+msgstr "No dashboards found. Use the + button to create a new dashboard."
+
 msgid "No description"
 msgstr "No description"
 
@@ -610,9 +610,6 @@ msgid_plural "{{count}} filters active"
 msgstr[0] "{{count}} filter active"
 msgstr[1] "{{count}} filters active"
 
-msgid "Loading dashboard – {{name}}"
-msgstr "Loading dashboard – {{name}}"
-
 msgid "Loading dashboard"
 msgstr "Loading dashboard"
 

src/actions/editDashboard.js

@@ -30,7 +30,6 @@ import {
     sGetItemConfigInsertPosition,
     RECEIVED_CODE,
 } from '../reducers/editDashboard.js'
-import { tFetchDashboards } from './dashboards.js'
 
 // actions
 
@@ -183,8 +182,5 @@ export const tSaveDashboard = () => async (dispatch, getState, dataEngine) => {
         ? await updateDashboard(dataEngine, dashboardToSave)
         : await postDashboard(dataEngine, dashboardToSave)
 
-    // update the dashboard list
-    await dispatch(tFetchDashboards())
-
     return Promise.resolve(dashboardId)
 }

src/actions/selected.js

@@ -6,9 +6,9 @@ import { storePreferredDashboardId } from '../modules/localStorage.js'
 import {
     SET_SELECTED,
     CLEAR_SELECTED,
+    SET_SELECTED_STARRED,
     sGetSelectedId,
 } from '../reducers/selected.js'
-import { acAppendDashboards } from './dashboards.js'
 import { acClearItemActiveTypes } from './itemActiveTypes.js'
 import { acClearItemFilters } from './itemFilters.js'
 import { acClearVisualizations } from './visualizations.js'
@@ -24,21 +24,17 @@ export const acClearSelected = () => ({
     type: CLEAR_SELECTED,
 })
 
+export const acSetSelectedStarred = (isStarred) => ({
+    type: SET_SELECTED_STARRED,
+    value: isStarred,
+})
+
 // thunks
 export const tSetSelectedDashboardById =
     (id, username) => async (dispatch, getState, dataEngine) => {
         const dashboard = await apiFetchDashboard(dataEngine, id, {
             mode: VIEW,
         })
-        dispatch(
-            acAppendDashboards([
-                {
-                    id: dashboard.id,
-                    displayName: dashboard.displayName,
-                    starred: dashboard.starred,
-                },
-            ])
-        )
 
         if (username) {
             storePreferredDashboardId(username, id)

src/components/App.js

@@ -5,7 +5,6 @@ import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
 import { Redirect, HashRouter as Router, Route, Switch } from 'react-router-dom'
 import { acClearActiveModalDimension } from '../actions/activeModalDimension.js'
-import { tFetchDashboards } from '../actions/dashboards.js'
 import { acClearDashboardsFilter } from '../actions/dashboardsFilter.js'
 import { acClearEditDashboard } from '../actions/editDashboard.js'
 import { acClearItemActiveTypes } from '../actions/itemActiveTypes.js'
@@ -27,21 +26,11 @@ import './styles/ItemGrid.css'
 const App = (props) => {
     const { systemSettings } = useSystemSettings()
     const { currentUser } = useCachedDataQuery()
+    const { setShowDescription } = props
 
     useEffect(() => {
-        props.fetchDashboards()
-        props.setShowDescription()
-
-        // store the headerbar height for controlbar height calculations
-        const headerbarHeight = document
-            .querySelector('header')
-            .getBoundingClientRect().height
-
-        document.documentElement.style.setProperty(
-            '--headerbar-height',
-            `${headerbarHeight}px`
-        )
-    }, [])
+        setShowDescription()
+    }, [setShowDescription])
 
     return (
         systemSettings && (
@@ -56,10 +45,7 @@ const App = (props) => {
                                 systemSettings.startModuleEnableLightweight ? (
                                     <Redirect to={ROUTE_START_PATH} />
                                 ) : (
-                                    <ViewDashboard
-                                        {...props}
-                                        username={currentUser.username}
-                                    />
+                                    <ViewDashboard {...props} />
                                 )
                             }
                         />
@@ -81,12 +67,7 @@ const App = (props) => {
                         <Route
                             exact
                             path="/:dashboardId"
-                            render={(props) => (
-                                <ViewDashboard
-                                    {...props}
-                                    username={currentUser.username}
-                                />
-                            )}
+                            render={(props) => <ViewDashboard {...props} />}
                         />
                         <Route
                             exact
@@ -113,13 +94,11 @@ const App = (props) => {
 }
 
 App.propTypes = {
-    fetchDashboards: PropTypes.func,
     resetState: PropTypes.func,
     setShowDescription: PropTypes.func,
 }
 
 const mapDispatchToProps = {
-    fetchDashboards: tFetchDashboards,
     setShowDescription: tSetShowDescription,
     resetState: () => (dispatch) => {
         dispatch(acSetSelected({}))

src/components/DashboardsBar/InformationBlock/InformationBlock.js

@@ -3,9 +3,11 @@ import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 import React, { useCallback } from 'react'
 import { connect } from 'react-redux'
-import { acSetDashboardStarred } from '../../../actions/dashboards.js'
-import { sGetDashboardStarred } from '../../../reducers/dashboards.js'
-import { sGetSelected } from '../../../reducers/selected.js'
+import { acSetSelectedStarred } from '../../../actions/selected.js'
+import {
+    sGetSelected,
+    sGetSelectedStarred,
+} from '../../../reducers/selected.js'
 import ActionsBar from './ActionsBar.js'
 import { apiStarDashboard } from './apiStarDashboard.js'
 import LastUpdatedTag from './LastUpdatedTag.js'
@@ -28,7 +30,7 @@ const InformationBlock = ({
         () =>
             apiStarDashboard(dataEngine, id, !starred)
                 .then(() => {
-                    setDashboardStarred(id, !starred)
+                    setDashboardStarred(!starred)
                 })
                 .catch(() => {
                     const msg = starred
@@ -77,12 +79,10 @@ const mapStateToProps = (state) => {
     return {
         displayName: dashboard.displayName,
         id: dashboard.id,
-        starred: dashboard.id
-            ? sGetDashboardStarred(state, dashboard.id)
-            : false,
+        starred: dashboard.id ? sGetSelectedStarred(state) : false,
     }
 }
 
 export default connect(mapStateToProps, {
-    setDashboardStarred: acSetDashboardStarred,
+    setDashboardStarred: acSetSelectedStarred,
 })(InformationBlock)

src/components/DashboardsBar/NavigationMenu/EndIntersectionDetector.js

@@ -0,0 +1,24 @@
+import { IntersectionDetector } from '@dhis2-ui/intersection-detector'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './styles/EndIntersectionDetector.module.css'
+
+export const EndIntersectionDetector = ({ rootRef, onEndReached }) => {
+    return (
+        <div className={styles.container}>
+            <IntersectionDetector
+                rootRef={rootRef}
+                onChange={({ isIntersecting }) =>
+                    isIntersecting && onEndReached()
+                }
+            />
+        </div>
+    )
+}
+
+EndIntersectionDetector.propTypes = {
+    rootRef: PropTypes.shape({
+        current: PropTypes.instanceOf(HTMLElement),
+    }).isRequired,
+    onEndReached: PropTypes.func.isRequired,
+}