Speed up Home initialization

package.json

@@ -37,8 +37,8 @@
     "@sentry/react": "7.119.0",
     "comlink": "4.4.1",
     "cozy-client": "^51.6.0",
-    "cozy-dataproxy-lib": "^1.9.0",
-    "cozy-device-helper": "2.7.0",
+    "cozy-dataproxy-lib": "^2.3.0",
+    "cozy-device-helper": "3.7.1",
     "cozy-devtools": "^1.2.1",
     "cozy-doctypes": "1.83.8",
     "cozy-flags": "4.0.0",

src/components/Applications.jsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useRef } from 'react'
+import React, { memo } from 'react'
 import memoize from 'lodash/memoize'
 import uniqBy from 'lodash/uniqBy'
 import { useQuery } from 'cozy-client'
@@ -60,42 +60,32 @@ const getApplicationsList = data => {
   }
 }
 
-export const Applications = ({ onAppsFetched }) => {
+export const Applications = () => {
   const showLogout = !!flag('home.mainlist.show-logout')
   const { t } = useI18n()
 
-  const { data } = useQuery(appsConn.query, appsConn)
+  const { data: apps } = useQuery(appsConn.query, appsConn)
 
   const homeMagicFolderConn = mkHomeMagicFolderConn(t)
+
   const magicHomeFolder = useQuery(
     homeMagicFolderConn.query,
     homeMagicFolderConn
   )
+
   const magicHomeFolderId = magicHomeFolder?.data?.[0]?._id
   const homeShortcutsConn = mkHomeShorcutsConn(magicHomeFolderId)
   const { data: shortcuts } = useQuery(homeShortcutsConn.query, {
     ...homeShortcutsConn,
     enabled: !!magicHomeFolderId
   })
 
-  const didLoad = useRef(false)
-
-  useEffect(() => {
-    const isReady =
-      didLoad.current === false && onAppsFetched && isValidData(data)
-
-    if (isReady) {
-      onAppsFetched(data)
-      didLoad.current = true
-    }
-  }, [data, onAppsFetched])
-
   return (
     <div className="app-list-wrapper u-m-auto u-w-100">
       <Divider className="u-mv-0" />
 
       <div className="app-list u-w-100 u-mv-3 u-mt-2-t u-mb-1-t u-mh-auto u-flex-justify-center">
-        {getApplicationsList(data)}
+        {getApplicationsList(apps)}
 
         {shortcuts &&
           shortcuts.map((shortcut, index) => (

src/components/FooterLogo/FooterLogo.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useClient, useQuery } from 'cozy-client'
-import { buildContextQuery } from 'queries'
+import { makeContextQuery } from 'queries'
 import Divider from 'cozy-ui/transpiled/react/Divider'
 import { useCozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
 
@@ -9,8 +9,10 @@ export const FooterLogo = () => {
   const { type } = useCozyTheme()
   const rootURL = client.getStackClient().uri
 
-  const contextQuery = buildContextQuery()
-  const { data } = useQuery(contextQuery.definition, contextQuery.options)
+  const { data } = useQuery(
+    makeContextQuery.definition,
+    makeContextQuery.options
+  )
 
   const logos = data?.logos?.home?.light || []
   const secondaries = logos.filter(logos => logos.type === 'secondary')

src/components/Home.jsx

@@ -18,7 +18,7 @@ import { Announcements } from 'components/Announcements/Announcements'
 
 import styles from './styles.styl'
 
-const Home = ({ setAppsReady, wrapper }) => {
+const Home = ({ wrapper }) => {
   const { pathname } = useLocation()
   const { isMobile } = useBreakpoints()
 
@@ -38,7 +38,7 @@ const Home = ({ setAppsReady, wrapper }) => {
               getFlagshipMetadata().immersive
           })}
         >
-          <Applications onAppsFetched={setAppsReady} />
+          <Applications />
           <Shortcuts />
           {flag('home.detailed-services-dev') ? (
             <GroupedServices />

src/containers/App.jsx

@@ -1,8 +1,8 @@
 /* global __SIMULATE_FLAGSHIP__ */
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { Navigate, Route } from 'react-router-dom'
 
-import flag, { enable as enableFlags } from 'cozy-flags'
+import flag from 'cozy-flags'
 import minilog from 'cozy-minilog'
 import { useQuery } from 'cozy-client'
 import { useWebviewIntent } from 'cozy-intent'
@@ -25,12 +25,10 @@ import IntentRedirect from 'components/IntentRedirect'
 import MoveModal from 'components/MoveModal'
 import StoreRedirection from 'components/StoreRedirection'
 import BackupNotification from 'components/BackupNotification/BackupNotification'
-import appEntryPoint from 'components/appEntryPoint'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { BackgroundContainer } from 'components/BackgroundContainer'
 import { FLAG_FAB_BUTTON_ENABLED } from 'components/AddButton/helpers'
 import { MainView } from 'components/MainView'
-import { toFlagNames } from './toFlagNames'
 import { Konnector } from 'components/Konnector'
 import DefaultRedirectionSnackbar from 'components/DefaultRedirectionSnackbar/DefaultRedirectionSnackbar'
 import ReloadFocus from './ReloadFocus'
@@ -39,27 +37,22 @@ import { formatShortcuts } from 'components/Shortcuts/utils'
 import {
   mkHomeMagicFolderConn,
   mkHomeCustomShorcutsConn,
-  mkHomeCustomShorcutsDirConn,
-  contextQuery
+  mkHomeCustomShorcutsDirConn
 } from 'queries'
+import { useFetchInitialData } from 'hooks/useFetchInitialData'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import SectionDialog from 'components/Sections/SectionDialog'
 import { SentryRoutes } from 'lib/sentry'
+import '../flags'
 
 window.flag = window.flag || flag
 window.minilog = minilog
 
-const App = ({ accounts, konnectors, triggers }) => {
+const App = () => {
   const { isMobile } = useBreakpoints()
   const [contentWrapper, setContentWrapper] = useState(undefined)
-  const [isFetching, setIsFetching] = useState(
-    [accounts, konnectors, triggers].some(collection =>
-      ['pending', 'loading'].includes(collection.fetchStatus)
-    )
-  )
-  const [hasError, setHasError] = useState(false)
-  const [isReady, setIsReady] = useState(false)
-  const [appsReady, setAppsReady] = useState(false)
+
+  const [didInit, setDidInit] = useState(false)
   const webviewIntent = useWebviewIntent()
   const theme = useCozyTheme()
 
@@ -93,48 +86,28 @@ const App = ({ accounts, konnectors, triggers }) => {
   const shortcutsDirectories = canHaveShortcuts
     ? formatShortcuts(folders, customHomeShortcuts)
     : null
-  const context = useQuery(contextQuery.definition, contextQuery.options)
+
+  const { isFetching, hasError } = useFetchInitialData()
 
   const showAssistantForMobile = isFlagshipApp()
     ? flag('cozy.searchbar.enabled-for-flagship')
     : flag('cozy.searchbar.enabled') && isMobile
 
-  useEffect(() => {
-    setIsFetching(
-      [accounts, konnectors, triggers, context].some(collection =>
-        ['pending', 'loading'].includes(collection.fetchStatus)
-      )
-    )
-    setHasError(
-      [accounts, konnectors, triggers, context].find(
-        collection => collection.fetchStatus === 'failed'
-      )
-    )
-  }, [accounts, konnectors, triggers, context])
-
-  if (context?.attributes?.features) {
-    const flags = toFlagNames(context.attributes.features)
-    enableFlags(flags)
-  }
-
-  useEffect(() => {
-    setIsReady(
-      appsReady &&
-        !hasError &&
-        !isFetching &&
-        shortcutsDirectories !== undefined
-    )
-  }, [appsReady, hasError, isFetching, shortcutsDirectories])
-
-  useEffect(() => {
-    if (isReady && webviewIntent) {
+  if (
+    !didInit &&
+    !hasError &&
+    !isFetching &&
+    shortcutsDirectories !== undefined
+  ) {
+    if (webviewIntent) {
       webviewIntent.call('setTheme', theme.variant)
       webviewIntent.call('hideSplashScreen')
     }
-    if (isReady && !webviewIntent && __SIMULATE_FLAGSHIP__) {
+    if (!webviewIntent && __SIMULATE_FLAGSHIP__) {
       document.getElementById('splashscreen').style.display = 'none'
     }
-  }, [isReady, theme, webviewIntent])
+    setDidInit(true)
+  }
 
   return (
     <>
@@ -145,7 +118,7 @@ const App = ({ accounts, konnectors, triggers }) => {
         <Corner />
         <div
           className="u-flex u-flex-column u-flex-content-start u-flex-content-stretch u-w-100 u-m-auto u-pos-relative"
-          ref={isReady ? div => setContentWrapper(div) : null}
+          ref={didInit ? div => setContentWrapper(div) : null}
         >
           <MoveModal />
           <HeroHeader />
@@ -167,7 +140,6 @@ const App = ({ accounts, konnectors, triggers }) => {
                   element={
                     <Home
                       wrapper={contentWrapper}
-                      setAppsReady={() => setAppsReady(true)}
                       shortcutsDirectories={shortcutsDirectories}
                     />
                   }
@@ -206,4 +178,4 @@ const App = ({ accounts, konnectors, triggers }) => {
   )
 }
 
-export default appEntryPoint(App)
+export default App