From b3804f3d58cfd876d75df9a837db7fe062ef0318 Mon Sep 17 00:00:00 2001
From: BluemediaDev <oliver@traber-info.de>
Date: Sun, 15 Jun 2025 18:58:02 +0000
Subject: [PATCH] Add loader to chargepoint list

---
 .../routes/(navbar)/chargepoint/+page.svelte  | 104 ++++++++++--------
 1 file changed, 58 insertions(+), 46 deletions(-)

diff --git a/frontend/src/routes/(navbar)/chargepoint/+page.svelte b/frontend/src/routes/(navbar)/chargepoint/+page.svelte
index 0d65da3..3239812 100644
--- a/frontend/src/routes/(navbar)/chargepoint/+page.svelte
+++ b/frontend/src/routes/(navbar)/chargepoint/+page.svelte
@@ -7,6 +7,7 @@
 
   $i18n.loadNamespaces('chargepoint')
 
+  let loading = $state(true)
   let chargepoints: ChargePoint[] = $state([])
   const pageSize = 25
   let page: number = $state(1)
@@ -21,16 +22,19 @@
       .get('/chargepoints', { params: { skip: (page - 1) * pageSize, limit: pageSize } })
       .then((res) => {
         chargepoints = res.data
+        loading = false
       })
   }
 
   function nextPage() {
     ++page
+    loading = true
     load()
   }
 
   function previousPage() {
     --page
+    loading = true
     load()
   }
 
@@ -44,52 +48,60 @@
     {$i18n.t('chargepoint:header')}
   </p>
   <div class="overflow-x-auto mt-8 bg-base-100 rounded-md">
-    <table class="table">
-      <thead>
-        <tr>
-          <th>{$i18n.t('chargepoint:tableHeader.name')}</th>
-          <th>{$i18n.t('chargepoint:tableHeader.active')}</th>
-          <th>{$i18n.t('chargepoint:tableHeader.lastSeen')}</th>
-          <th>{$i18n.t('chargepoint:tableHeader.price')}</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        {#if chargepoints.length > 0}
-          {#each chargepoints as chargepoint}
-            <tr>
-              <td>
-                {chargepoint.identity}
-              </td>
-              <td>
-                {#if chargepoint.is_active}
-                  {$i18n.t('chargepoint:state.enabled')}
-                {:else}
-                  {$i18n.t('chargepoint:state.disabled')}
-                {/if}
-              </td>
-              <td>
-                {$i18n.t(
-                  'chargepoint:tableFormatting.lastSeen',
-                  relativeTimeFromDate(new Date(chargepoint.last_seen))!
-                )}
-              </td>
-              <td>{chargepoint.price} €</td>
-              <th>
-                <a href="/chargepoint/{chargepoint.id}" class="btn btn-sm btn-primary">
-                  {$i18n.t('common:transactionTable.detailButton')}
-                  <i class="bi bi-arrow-right"></i>
-                </a>
-              </th>
-            </tr>
-          {/each}
-        {/if}
-      </tbody>
-    </table>
-    {#if chargepoints.length === 0}
-      <p class="w-full mt-15 mb-15 text-center text-xl font-bold">
-        {$i18n.t('chargepoint:noChargepoints')}
-      </p>
+    {#if !loading}
+      <table class="table">
+        <thead>
+          <tr>
+            <th>{$i18n.t('chargepoint:tableHeader.name')}</th>
+            <th>{$i18n.t('chargepoint:tableHeader.active')}</th>
+            <th>{$i18n.t('chargepoint:tableHeader.lastSeen')}</th>
+            <th>{$i18n.t('chargepoint:tableHeader.price')}</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {#if chargepoints.length > 0}
+            {#each chargepoints as chargepoint}
+              <tr>
+                <td>
+                  {chargepoint.identity}
+                </td>
+                <td>
+                  {#if chargepoint.is_active}
+                    {$i18n.t('chargepoint:state.enabled')}
+                  {:else}
+                    {$i18n.t('chargepoint:state.disabled')}
+                  {/if}
+                </td>
+                <td>
+                  {$i18n.t(
+                    'chargepoint:tableFormatting.lastSeen',
+                    relativeTimeFromDate(new Date(chargepoint.last_seen))!
+                  )}
+                </td>
+                <td>{chargepoint.price} €</td>
+                <th>
+                  <a href="/chargepoint/{chargepoint.id}" class="btn btn-sm btn-primary">
+                    {$i18n.t('common:transactionTable.detailButton')}
+                    <i class="bi bi-arrow-right"></i>
+                  </a>
+                </th>
+              </tr>
+            {/each}
+          {/if}
+        </tbody>
+      </table>
+      {#if chargepoints.length === 0}
+        <p class="w-full mt-15 mb-15 text-center text-xl font-bold">
+          {$i18n.t('chargepoint:noChargepoints')}
+        </p>
+      {/if}
+    {:else}
+      <div class="card w-full bg-base-100 shadow-sm">
+        <div class="card-body flex items-center justify-center p-8">
+          <span class="loading loading-dots loading-xl"></span>
+        </div>
+      </div>
     {/if}
   </div>
   <div class="join mt-4">