pessimistic id mapping loading on frontend

web/src/App.svelte

@@ -56,16 +56,23 @@
           addModal.open(id, firstName, lastName);
         }}
       />
-      <span>Gesammmte einträge: { Object.keys(mapping).length}</span>
+      <span>Gesammmte einträge: {Object.keys(mapping).length}</span>
+    {:else}
+      Lade ...
     {/if}
   </div>
 
-
-
   <AddIDModal
     bind:this={addModal}
-    onSubmitted={async () => {
-      mapping = await fetchMapping();
+    onSubmitted={async (id, firstName, lastname) => {
+      if (mapping == null) {
+        return;
+      }
+
+      mapping[id] = {
+        first: firstName,
+        last: lastname,
+      };
     }}
   />
 

web/src/lib/AddIDModal.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
   import Modal from "./Modal.svelte";
 
-  let { onSubmitted }: { onSubmitted?: () => void } = $props();
+  let {
+    onSubmitted,
+  }: {
+    onSubmitted?: (id: string, firstName: string, lastName: string) => void;
+  } = $props();
 
   let displayID = $state("");
   let firstName = $state("");
@@ -9,7 +13,11 @@
 
   let modal: Modal;
 
-  export function open(presetID: string, presetFirstName?: string, presetLastName?: string) {
+  export function open(
+    presetID: string,
+    presetFirstName?: string,
+    presetLastName?: string,
+  ) {
     displayID = presetID;
 
     firstName = presetFirstName ?? "";
@@ -33,13 +41,14 @@
         "Content-Type": "application/json",
       },
       body: JSON.stringify(data),
-    }).then(() => {
-      onSubmitted?.();
+    }).then((res) => {
+      if (res.status == 201) {
+        onSubmitted?.(displayID, firstName, lastName);
+      }
+      firstName = "";
+      lastName = "";
+      displayID = "";
     });
-
-    firstName = "";
-    lastName = "";
-    displayID = "";
   }
 </script>