fix: [CGC-70] Missing loading and error handling for gathering TEI (#88)

i18n/en.pot

@@ -5,8 +5,15 @@ 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: 2024-06-19T13:53:21.384Z\n"
-"PO-Revision-Date: 2024-06-19T13:53:21.384Z\n"
+"POT-Creation-Date: 2024-07-31T11:25:42.922Z\n"
+"PO-Revision-Date: 2024-07-31T11:25:42.922Z\n"
+
+msgid ""
+"Failed to load data. Please check that you have selected the correct "
+"program stage ID in the configuration."
+msgstr ""
+"Failed to load data. Please check that you have selected the correct "
+"program stage ID in the configuration."
 
 msgid "Growth Chart"
 msgstr "Growth Chart"

src/Plugin.tsx

@@ -14,6 +14,7 @@ import { GenericLoading } from './UI/GenericLoading';
 import { useCustomReferences } from './utils/DataFetching/Hooks/useCustomReferences';
 import { chartData } from './DataSets/WhoStandardDataSets/ChartData';
 import { ConfigError, CustomReferenceError, DefaultIndicatorError } from './UI/FeedbackComponents';
+import { GenericError } from './UI/GenericError';
 
 const queryClient = new QueryClient();
 
@@ -38,9 +39,17 @@ const PluginInner = (propsFromParent: EnrollmentOverviewProps) => {
         orgUnitId,
     } = propsFromParent;
 
-    const { trackedEntity } = useTeiById({ teiId });
+    const {
+        trackedEntity,
+        isLoading: isLoadingTei,
+        isError: isErrorTei,
+    } = useTeiById({ teiId });
 
-    const { events } = useEvents({
+    const {
+        events,
+        isLoading: isLoadingEvents,
+        isError: isErrorEvents,
+    } = useEvents({
         orgUnitId,
         programStageId: chartConfig?.metadata.program.programStageId,
         programId,
@@ -65,7 +74,7 @@ const PluginInner = (propsFromParent: EnrollmentOverviewProps) => {
 
     const [open, setOpen] = useState(true);
 
-    if (isLoading || isLoadingRef) {
+    if (isLoading || isLoadingRef || isLoadingTei || isLoadingEvents) {
         return <GenericLoading />;
     }
 
@@ -75,6 +84,14 @@ const PluginInner = (propsFromParent: EnrollmentOverviewProps) => {
         );
     }
 
+    if (isErrorTei || isErrorEvents) {
+        return (
+            <GenericError
+                errorMessage={i18n.t('Failed to load data. Please check that you have selected the correct programStageId in the configuration.')}
+            />
+        );
+    }
+
     if (chartConfig?.settings.customReferences && isErrorRef) {
         return (
             <CustomReferenceError />