RunnersOverview loading fix

ref #146

src/components/runners/RunnersOverview.svelte

@@ -11,20 +11,18 @@
   import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+  import { onMount } from "svelte";
   $: active_deletes = [];
-  export let current_runners = [];
+  let dataLoaded = false;
+  let current_runners = [];
   const handler = new DataHandler(current_runners, { rowsPerPage: 50 });
   const rows = handler.getRows();
-  const runners_promise = RunnerService.runnerControllerGetAll().then((val) => {
-    console.log(val);
-    current_runners = val;
-  });
   $: sponsoring_contracts_show = current_runners.some(
-    (r) => r.is_selected === true
+    (r) => r.selected === true
   );
-  $: cards_show = current_runners.some((r) => r.is_selected === true);
-  $: certificates_show = current_runners.some((r) => r.is_selected === true);
-  $: generate_runners = current_runners.filter((r) => r.is_selected === true);
+  $: cards_show = current_runners.some((r) => r.selected === true);
+  $: certificates_show = current_runners.some((r) => r.selected === true);
+  $: generate_runners = current_runners.filter((r) => r.selected === true);
   $: teams = [];
   $: orgs = [];
   $: mappedteams = teams.map(function (g) {
@@ -35,17 +33,25 @@
       return { value: g.id, label: g.name };
     })
     .concat(mappedteams);
-
-  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-    teams = val;
-  });
-  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-    orgs = val;
+  onMount(() => {
+    RunnerService.runnerControllerGetAll().then((val) => {
+      current_runners = val;
+      dataLoaded = true;
+      handler.setRows(val);
+    });
+    RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+      teams = val;
+    });
+    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
+      (val) => {
+        orgs = val;
+      }
+    );
   });
 </script>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
-  {#await runners_promise}
+  {#if !dataLoaded}
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
       role="alert"
@@ -53,7 +59,7 @@
       <p class="font-bold">{$_("runners-are-being-loaded")}</p>
       <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
-  {:then}
+  {:else}
     <div class="h-12">
       <GenerateSponsoringContracts
         bind:sponsoring_contracts_show
@@ -79,7 +85,7 @@
             <Th {handler} orderBy="firstname">First Name</Th>
             <Th {handler} orderBy="middlename">Middle Name</Th>
             <Th {handler} orderBy="lastname">Last Name</Th>
-            <Th {handler} orderBy="group">Gruppe</Th>
+            <th>Gruppe</th>
             <Th {handler} orderBy="distance">Distanz</Th>
             <th>{$_("action")}</th>
           </tr>
@@ -171,7 +177,7 @@
         </tbody>
       </table>
     </Datatable>
-  {/await}
+  {/if}
 {/if}
 
 <style>