Implemented Async loading of cards via pagination (500 cards per request)

ref #175

src/components/cards/CardsOverview.svelte

@@ -32,7 +32,7 @@
   export let original_data = {};
   export let current_cards = [];
   export const addCards = (cards) => {
-    console.log(cards)
+    console.log(cards);
     current_cards = current_cards.concat(...cards);
     options.update((options) => ({
       ...options,
@@ -155,15 +155,29 @@
     }).showToast();
   }
 
-  onMount(() => {
+  onMount(async () => {
-    RunnerCardService.runnerCardControllerGetAll().then((val) => {
+    let page = 0;
-      current_cards = val;
+    while (page >= 0) {
+      const cards = await RunnerCardService.runnerCardControllerGetAll(
+        page,
+        500
+      );
+      if (cards.length == 0) {
+        page = -2;
+      }
+
+      current_cards = current_cards.concat(...cards);
       options.update((options) => ({
         ...options,
         data: current_cards,
       }));
+
+      if (page == 0) {
         dataLoaded = true;
-    });
+      }
+      page++;
+    }
+    console.log("All cards loaded");
   });
 </script>
 
@@ -229,7 +243,7 @@
               ...options,
               data: current_cards,
             }));
-            $table.resetRowSelection()
+            $table.resetRowSelection();
           }}
         >
           {$_("delete-cards")}
@@ -249,7 +263,10 @@
           </svg>
         </button>
       {/if}
-      <GenerateRunnerCards cards_show={selected.length>0} bind:generate_cards={selectedCards} />
+      <GenerateRunnerCards
+        cards_show={selected.length > 0}
+        bind:generate_cards={selectedCards}
+      />
     </div>
     <div class="overflow-x-auto">
       <table class="w-full">