fix: Handle missing variables for custom references

src/Plugin.tsx

@@ -27,7 +27,7 @@ const PluginInner = (propsFromParent: EnrollmentOverviewProps) => {
     const { customReferences, isLoading: isLoadingRef, isError: isErrorRef } = useCustomReferences();
     const { teiId, programId } = propsFromParent;
     const { trackedEntity } = useTeiById({ teiId });
-    const { events } = useEvents({
+    const { events, isLoading: isLoadingEvents } = useEvents({
         programId,
         teiId,
     });
@@ -44,14 +44,14 @@ const PluginInner = (propsFromParent: EnrollmentOverviewProps) => {
 
     const { chartData, measurementDataExist } = useFilterByMissingData(
         mappedGrowthVariables,
-        chartConfig?.settings.customReferences ? customReferences : chartDataWHO,
+        chartConfig && customReferences && chartConfig?.settings.customReferences ? customReferences : chartDataWHO,
     );
 
     const isPercentiles = chartConfig?.settings.usePercentiles || false;
 
     const [open, setOpen] = useState(true);
 
-    if (isLoading || isLoadingRef) {
+    if (isLoading || isLoadingRef || isLoadingEvents) {
         return <GenericLoading />;
     }
 

src/UI/GenericError/EventError.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import i18n from '@dhis2/d2-i18n';
+import { WidgetCollapsible } from '../../components/WidgetCollapsible';
+import { Warning } from '../Icons';
+
+export const ChartConfigError = () => {
+    const [open, setOpen] = useState(true);
+    return (
+        <div style={{
+            width: '100vw',
+            margin: 0,
+            padding: 0,
+        }}
+        >
+            <WidgetCollapsible
+                header={i18n.t('Growth Chart')}
+                borderless={false}
+                open={open}
+                onOpen={() => setOpen(true)}
+                onClose={() => setOpen(false)}
+            >
+                <div className='flex justify-center'>
+                    <Warning className='w-12 h-12' />
+                    <p className='flex p-5 pt-2'>
+                        {i18n.t('There was an error fetching the event.')}
+                        <br />
+                        {i18n.t('Please check the configuration in Datastore Management application and try again.')}
+                    </p>
+                </div>
+            </WidgetCollapsible>
+        </div>
+    );
+};