.prettierrc

@@ -0,0 +1,7 @@
+{
+  "svelteSortOrder": "options-styles-scripts-markup",
+  "svelteStrictMode": true,
+  "svelteBracketNewLine": false,
+  "svelteAllowShorthand": false,
+  "svelteIndentScriptAndStyle": false
+}

.vscode/extensions.json

@@ -1,14 +0,0 @@
-{
-    "recommendations": [
-        "2gua.rainbow-brackets",
-        "christian-kohler.npm-intellisense",
-        "remimarsal.prettier-now",
-        "svelte.svelte-vscode",
-        "lokalise.i18n-ally",
-        "fivethree.vscode-svelte-snippets",
-        "voorjaar.windicss-intellisense"
-    ],
-    "unwantedRecommendations": [
-        "antfu.i18n-ally"
-    ]
-}

package.json

@@ -10,13 +10,13 @@
 	},
 	"license": "CC-BY-NC-SA-4.0",
 	"devDependencies": {
-		"check-password-strength": "2.0.2",
 		"@odit/lfk-client-js": "0.10.1",
 		"@odit/license-exporter": "0.0.11",
 		"@sveltejs/vite-plugin-svelte": "1.0.0-next.5",
 		"@types/html-minifier": "4.0.0",
 		"auto-changelog": "2.2.1",
 		"autoprefixer": "10.2.5",
+		"check-password-strength": "2.0.2",
 		"csvtojson": "2.0.10",
 		"gridjs": "3.4.0",
 		"html-minifier": "4.0.0",
@@ -28,6 +28,7 @@
 		"svelte-i18n": "3.3.9",
 		"svelte-preprocess": "4.7.0",
 		"svelte-select": "3.17.0",
+		"svelte-tiny-virtual-list": "^1.1.5",
 		"tailwindcss": "2.0.4",
 		"tinro": "0.6.1",
 		"toastify-js": "1.10.0",
@@ -52,5 +53,8 @@
 		"hooks": {
 			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js  && git add index.html && node order.js  && git add src/locales"
 		}
+	},
+	"dependencies": {
+		"svelte-infinite-loading": "^1.3.6"
 	}
 }

src/components/cards/CardsOverview.svelte

@@ -1,5 +1,6 @@
 <script>
   import { getLocaleFromNavigator, json, _ } from "svelte-i18n";
+  import InfiniteLoading from 'svelte-infinite-loading';
   import { RunnerCardService } from "@odit/lfk-client-js";
   import store from "../../store";
   import Toastify from "toastify-js";
@@ -11,11 +12,20 @@
   export let editable = {};
   export let original_data = {};
   export let current_cards = [];
+  $: filtered_cards = current_cards.filter(function (c) {
+    if (
+      c.code.toLowerCase().includes(searchvalue.toLowerCase()) ||
+      c.runner?.firstname.toLowerCase().includes(searchvalue.toLowerCase()) ||
+      c.runner?.middlename.toLowerCase().includes(searchvalue.toLowerCase()) ||
+      c.runner?.lastname.toLowerCase().includes(searchvalue.toLowerCase()) ||
+      should_display_based_on_id(c.id)
+    ) {
+      return true;
+    }
+  });
   $: searchvalue = "";
   $: active_deletes = [];
-  $: cards_show = current_cards.some(
+  $: cards_show = current_cards.some((r) => r.is_selected === true);
-    (r) => r.is_selected === true
-  );
   $: generate_cards = current_cards.filter((r) => r.is_selected === true);
   const cards_promise = RunnerCardService.runnerCardControllerGetAll().then(
     (val) => {
@@ -46,8 +56,39 @@
     original_data = Object.assign(original_data, card);
     edit_modal_open = true;
   }
+// -----------------
+  export let wrapperHeight = "500px";
+  export let wrapperWidth = "1000px";
+  let scrollTop = 0;
+  $: rendered = filtered_cards;
+  let innerHeight = 0;
+  let ele;
+  $: updateSlice(scrollTop);
+  $: innerHeight = `${filtered_cards.length * 25}px`;
+  $: if (ele) updateSlice();
+  function updateSlice() {
+    const height = ele ? parseInt(ele.clientHeight) : 100;
+    const init = scrollTop / 25;
+    const end = Math.ceil((scrollTop + height) / 25);
+    rendered = filtered_cards.slice(init, end + 15);
+  }
+  function updateScroll($event) {
+    scrollTop = $event.target.scrollTop;
+  }
 </script>
 
+<style>
+  .virtual-wrapper {
+    overflow-y: scroll;
+    margin: 0 auto;
+  }
+  .inner-wrapper {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+  }
+</style>
+
 {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:UPDATE')}
   <CardDetailModal
     bind:current_cards
@@ -80,6 +121,7 @@
             bind:cards_show
             bind:generate_cards />
         </div>
+        {rendered.length}
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">
@@ -122,7 +164,14 @@
             </tr>
           </thead>
           <tbody class="divide-y divide-gray-200">
-            {#each current_cards as card}
+            <!-- //// -->
+            <div
+  class="virtual-wrapper"
+  on:scroll={updateScroll}
+  style="height: {wrapperHeight}; width: {wrapperWidth}"
+  bind:this={ele}>
+  <div class="inner-wrapper" style="height: {innerHeight}">
+    {#each filtered_cards as card, index}
     {#if card.code
       .toLowerCase()
       .includes(
@@ -222,6 +271,8 @@
       </tr>
     {/if}
     {/each}
+  </div>
+</div>
           </tbody>
         </table>
       </div>