From d514f89addef54e4730c5af5c9f312acd5162a82 Mon Sep 17 00:00:00 2001
From: tschumpr <roswita.tschuemperlin@geowerkstatt.ch>
Date: Wed, 31 Jan 2024 14:00:47 +0100
Subject: [PATCH 1/2] Add spinner while loading completions

---
 .../form/borehole/completion/completion.js    | 33 +++++++++++++++----
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/client/src/commons/form/borehole/completion/completion.js b/src/client/src/commons/form/borehole/completion/completion.js
index 301b6f523..7386fa135 100644
--- a/src/client/src/commons/form/borehole/completion/completion.js
+++ b/src/client/src/commons/form/borehole/completion/completion.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import { useHistory, useLocation, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Stack, Tooltip, Typography } from "@mui/material";
+import { CircularProgress, Stack, Tooltip, Typography } from "@mui/material";
 import {
   AddButton,
   CompletionBox,
@@ -30,6 +30,7 @@ const Completion = props => {
     index: 0,
     selected: null,
     completions: [],
+    isLoadingData: true,
   });
   const mounted = useRef(false);
   const [editing, setEditing] = useState(false);
@@ -57,6 +58,7 @@ const Completion = props => {
   };
 
   const loadData = (index, selectedId) => {
+    setState({ ...state, isLoadingData: true });
     if (boreholeId && mounted.current) {
       getCompletions(parseInt(boreholeId, 10)).then(response => {
         if (selectedId === "new") {
@@ -77,12 +79,14 @@ const Completion = props => {
             index: index,
             selected: response[index],
             completions: response,
+            isLoadingData: false,
           });
         } else {
           setState({
             index: 0,
             selected: null,
             completions: [],
+            isLoadingData: false,
           });
         }
       });
@@ -91,6 +95,7 @@ const Completion = props => {
         index: 0,
         selected: null,
         completions: [],
+        isLoadingData: false,
       });
     }
   };
@@ -104,6 +109,7 @@ const Completion = props => {
         index: index,
         selected: state.completions[index],
         completions: state.completions,
+        isLoadingData: false,
       });
     }
   };
@@ -124,6 +130,7 @@ const Completion = props => {
             index: newlySelectedTab,
             selected: newCompletionList[newlySelectedTab],
             completions: newCompletionList,
+            isLoadingData: false,
           });
         }
       } else {
@@ -132,6 +139,7 @@ const Completion = props => {
           index: newlySelectedTab,
           selected: state.completions[newlySelectedTab],
           completions: state.completions,
+          isLoadingData: false,
         });
       }
     }
@@ -158,6 +166,7 @@ const Completion = props => {
       index: loadedCompletions.length,
       selected: tempCompletion,
       completions: [...loadedCompletions, tempCompletion],
+      isLoadingData: false,
     });
     setEditing(true);
   };
@@ -216,6 +225,7 @@ const Completion = props => {
         index: index,
         selected: newCompletionList[index],
         completions: newCompletionList,
+        isLoadingData: false,
       });
     }
   };
@@ -303,12 +313,14 @@ const Completion = props => {
           )}
         </Stack>
         <Stack flex="1 0 0" marginTop="10px">
-          {state.selected?.id > 0 ? (
-            <CompletionContent
-              completion={state.selected}
-              isEditable={isEditable}
-            />
-          ) : (
+          {state.isLoadingData ? (
+            <Stack
+              alignItems="center"
+              justifyContent="center"
+              sx={{ flexGrow: 1 }}>
+              <CircularProgress color="inherit" />
+            </Stack>
+          ) : state.selected === null ? (
             <Stack
               alignItems="center"
               justifyContent="center"
@@ -317,6 +329,13 @@ const Completion = props => {
                 {t("msgCompletionEmpty")}
               </Typography>
             </Stack>
+          ) : (
+            state.selected.id > 0 && (
+              <CompletionContent
+                completion={state.selected}
+                isEditable={isEditable}
+              />
+            )
           )}
         </Stack>
       </Stack>

From 37e70473e8cc81919d8120719558e5dfda6b1c9b Mon Sep 17 00:00:00 2001
From: tschumpr <roswita.tschuemperlin@geowerkstatt.ch>
Date: Wed, 31 Jan 2024 14:10:04 +0100
Subject: [PATCH 2/2] Fix check

---
 src/client/src/commons/form/borehole/completion/completion.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/src/commons/form/borehole/completion/completion.js b/src/client/src/commons/form/borehole/completion/completion.js
index 7386fa135..74884a5f3 100644
--- a/src/client/src/commons/form/borehole/completion/completion.js
+++ b/src/client/src/commons/form/borehole/completion/completion.js
@@ -330,7 +330,7 @@ const Completion = props => {
               </Typography>
             </Stack>
           ) : (
-            state.selected.id > 0 && (
+            state.selected?.id > 0 && (
               <CompletionContent
                 completion={state.selected}
                 isEditable={isEditable}