♻️ [open-formulieren/open-forms#4929] Move analytics tool config load…

…ing into own component

Instead of hooking this up to the Form component, we can instead wrap
the context provider and let it fetch the config by itself. This way,
we slim down the Form component, and get a small performance boost
since loading the analytics tool config is not immediately relevant.

Since context is used, only when the config loading is resolved will
the consumers be re-rendered, which at this point is mostly the
AbortButton component. We deliberately don't show a loader when
the config is being retrieved as this would block the entire page
without good reason and we have a faster time-to-interact this way.

src/Context.js

@@ -27,14 +27,6 @@ const FormContext = React.createContext({
 });
 FormContext.displayName = 'FormContext';
 
-const AnalyticsToolsConfigContext = React.createContext({
-  govmetricSourceIdFormFinished: '',
-  govmetricSourceIdFormAborted: '',
-  govmetricSecureGuidFormFinished: '',
-  govmetricSecureGuidFormAborted: '',
-  enableGovmetricAnalytics: false,
-});
-
 const ConfigContext = React.createContext({
   baseUrl: '',
   clientBaseUrl: window.location.href,
@@ -51,10 +43,4 @@ FormioTranslations.displayName = 'FormioTranslations';
 const SubmissionContext = React.createContext({submission: null});
 SubmissionContext.displayName = 'SubmissionContext';
 
-export {
-  FormContext,
-  ConfigContext,
-  FormioTranslations,
-  SubmissionContext,
-  AnalyticsToolsConfigContext,
-};
+export {FormContext, ConfigContext, FormioTranslations, SubmissionContext};

src/components/AbortButton/AbortButton.jsx

@@ -1,15 +1,14 @@
 import PropTypes from 'prop-types';
-import {useContext} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
-import {AnalyticsToolsConfigContext} from 'Context';
 import {OFButton} from 'components/Button';
+import {useAnalyticsToolsConfig} from 'components/analytics/AnalyticsToolConfigProvider';
 import {buildGovMetricUrl} from 'components/analytics/utils';
 import useFormContext from 'hooks/useFormContext';
 
 const AbortButton = ({isAuthenticated, onDestroySession}) => {
   const intl = useIntl();
-  const analyticsToolsConfig = useContext(AnalyticsToolsConfigContext);
+  const analyticsToolsConfig = useAnalyticsToolsConfig;
   const form = useFormContext();
 
   const confirmationMessage = isAuthenticated

src/components/Form.jsx

@@ -9,12 +9,13 @@ import {
   useNavigate,
   useSearchParams,
 } from 'react-router-dom';
-import {useAsync, usePrevious} from 'react-use';
+import {usePrevious} from 'react-use';
 
-import {AnalyticsToolsConfigContext, ConfigContext} from 'Context';
-import {destroy, get} from 'api';
+import {ConfigContext} from 'Context';
+import {destroy} from 'api';
 import Loader from 'components/Loader';
 import ProgressIndicator from 'components/ProgressIndicator';
+import AnalyticsToolsConfigProvider from 'components/analytics/AnalyticsToolConfigProvider';
 import {
   PI_TITLE,
   START_FORM_QUERY_PARAM,
@@ -72,16 +73,13 @@ const Form = () => {
   };
 
   // if there is an active submission still, re-load that (relevant for hard-refreshes)
+  // TODO: should probably move to the router loader
   const [loading, setSubmissionId, removeSubmissionId] = useRecycleSubmission(
     form,
     submission,
     onSubmissionLoaded
   );
 
-  const {value: analyticsToolsConfigInfo, loading: loadingAnalyticsConfig} = useAsync(async () => {
-    return await get(`${config.baseUrl}analytics/analytics-tools-config-info`);
-  }, [intl.locale]);
-
   useEffect(
     () => {
       if (prevLocale === undefined) return;
@@ -120,7 +118,7 @@ const Form = () => {
     );
   }
 
-  if (loading || loadingAnalyticsConfig || shouldAutomaticallyRedirect) {
+  if (loading || shouldAutomaticallyRedirect) {
     return <Loader modifiers={['centered']} />;
   }
 
@@ -204,7 +202,7 @@ const Form = () => {
   // render the form step if there's an active submission (and no summary)
   return (
     <FormDisplay progressIndicator={progressIndicator}>
-      <AnalyticsToolsConfigContext.Provider value={analyticsToolsConfigInfo}>
+      <AnalyticsToolsConfigProvider>
         <SubmissionProvider
           submission={submission}
           onSubmissionObtained={submission => {
@@ -216,7 +214,7 @@ const Form = () => {
         >
           <Outlet />
         </SubmissionProvider>
-      </AnalyticsToolsConfigContext.Provider>
+      </AnalyticsToolsConfigProvider>
     </FormDisplay>
   );
 };

src/components/analytics/AnalyticsToolConfigProvider.jsx

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React, {useContext} from 'react';
+import {useIntl} from 'react-intl';
+import {useAsync} from 'react-use';
+
+import {ConfigContext} from 'Context';
+import {get} from 'api';
+
+const AnalyticsToolsConfigContext = React.createContext({
+  govmetricSourceIdFormFinished: '',
+  govmetricSourceIdFormAborted: '',
+  govmetricSecureGuidFormFinished: '',
+  govmetricSecureGuidFormAborted: '',
+  enableGovmetricAnalytics: false,
+});
+
+AnalyticsToolsConfigContext.displayName = 'AnalyticsToolsConfigContext';
+
+const AnalyticsToolsConfigProvider = ({children}) => {
+  const {locale} = useIntl();
+  const {baseUrl} = useContext(ConfigContext);
+
+  const {value} = useAsync(async () => {
+    return await get(`${baseUrl}analytics/analytics-tools-config-info`);
+  }, [locale]);
+
+  return (
+    <AnalyticsToolsConfigContext.Provider value={value}>
+      {children}
+    </AnalyticsToolsConfigContext.Provider>
+  );
+};
+
+AnalyticsToolsConfigProvider.propTypes = {
+  children: PropTypes.node,
+};
+
+export const useAnalyticsToolsConfig = () => useContext(AnalyticsToolsConfigContext);
+
+export default AnalyticsToolsConfigProvider;

src/components/analytics/GovMetricSnippet.jsx

@@ -1,17 +1,16 @@
 import govmetricAverageImg from 'img/govmetric/average.png';
 import govmetricGoodImg from 'img/govmetric/good.png';
 import govmetricPoorImg from 'img/govmetric/poor.png';
-import {useContext} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
-import {AnalyticsToolsConfigContext} from 'Context';
 import useFormContext from 'hooks/useFormContext';
 
+import {useAnalyticsToolsConfig} from './AnalyticsToolConfigProvider';
 import {buildGovMetricUrl, govMetricURLWithRating} from './utils';
 
 const GovMetricSnippet = () => {
   const {enableGovmetricAnalytics, govmetricSourceIdFormFinished, govmetricSecureGuidFormFinished} =
-    useContext(AnalyticsToolsConfigContext);
+    useAnalyticsToolsConfig();
   const form = useFormContext();
   const intl = useIntl();