add optional chain to guard tabledata while large scale data is being loaded

Author: erinz2020

frontend/src/pages/BulkImport/BulkImportTask.jsx

@@ -104,26 +104,27 @@ const BulkImportTask = observer(() => {
     }
   };
 
-  const tableData = task?.encounters?.map((item) => {
-    const taskArray =
-      task?.iaSummary?.statsAnnotations?.encounterTaskInfo?.[item.id] || [];
-    const classArray =
-      Array.isArray(taskArray) && taskArray?.length > 0 ? taskArray[0] : [];
-    return {
-      encounterID: item.id,
-      encounterDate: item.date,
-      user: item.submitter?.displayName || "-",
-      occurrenceID: item.occurrenceId || "-",
-      individualID: item.individualId || "-",
-      individualName: item.individualDisplayName || item.individualId || "-",
-      imageCount: item.numberMediaAssets,
-      class: classArray,
-      createdMillis: item.createdMillis || "-",
-    };
-  });
+  const tableData =
+    task?.encounters?.map((item) => {
+      const taskArray =
+        task?.iaSummary?.statsAnnotations?.encounterTaskInfo?.[item.id] || [];
+      const classArray =
+        Array.isArray(taskArray) && taskArray?.length > 0 ? taskArray[0] : [];
+      return {
+        encounterID: item.id,
+        encounterDate: item.date,
+        user: item.submitter?.displayName || "-",
+        occurrenceID: item.occurrenceId || "-",
+        individualID: item.individualId || "-",
+        individualName: item.individualDisplayName || item.individualId || "-",
+        imageCount: item.numberMediaAssets,
+        class: classArray,
+        createdMillis: item.createdMillis || "-",
+      };
+    }) || [];
 
   const sortedTableData = tableData
-    .sort((a, b) => {
+    ?.sort((a, b) => {
       return new Date(a.createdMillis) - new Date(b.createdMillis);
     })
     .map((item, index) => ({