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,6 +48,7 @@
     {$i18n.t('chargepoint:header')}
   </p>
   <div class="overflow-x-auto mt-8 bg-base-100 rounded-md">
+    {#if !loading}
       <table class="table">
         <thead>
           <tr>
@@ -91,6 +96,13 @@
           {$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">
     <button onclick={previousPage} disabled={page === 1 || null} class="join-item btn bg-base-100"