add spinner gif to display instead of No results while data is loading

components/TorrustSelect.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="group dropdown" :class="dropdownAlignment">
-    <div tabindex="0" class="items-center duration-200 select select-bordered group-hover:border-amber-500" :class="{ 'h-[3.5rem]': !!label }">
+    <div
+      tabindex="0"
+      class="items-center duration-200 select select-bordered group-hover:border-amber-500"
+      :class="{ 'h-[3.5rem]': !!label }"
+    >
       <div class="flex flex-col mr-1 text-left capitalize flex-nowrap">
         <span v-if="label" class="text-xs text-primary">{{ label }}</span>
         <div class="flex flex-row text-sm flex-nowrap">
@@ -10,7 +14,11 @@
         </div>
       </div>
     </div>
-    <div ref="dropdownContent" tabindex="0" class="flex flex-col gap-2 p-2 mt-3 border rounded-lg shadow dropdown-content border-base-content/20 bg-base-100 z-[1]">
+    <div
+      ref="dropdownContent"
+      tabindex="0"
+      class="flex flex-col gap-2 p-2 mt-3 border rounded-lg shadow dropdown-content border-base-content/20 bg-base-100 z-[1]"
+    >
       <template v-if="props.search">
         <div class="">
           <input
@@ -34,14 +42,8 @@
                 {{ option.name }}
               </div>
               <div v-if="props.multiple" class="flex flex-col items-center ml-auto">
-                <span
-                  v-if="isSelectedOption(option)"
-                  class="relative inline-flex"
-                >
-                  <input
-                    type="checkbox"
-                    class="w-6 h-6 border-2 rounded-md appearance-none bg-primary border-primary"
-                  >
+                <span v-if="isSelectedOption(option)" class="relative inline-flex">
+                  <input type="checkbox" class="w-6 h-6 border-2 rounded-md appearance-none bg-primary border-primary">
                   <CheckIcon
                     class="absolute w-5 text-neutral-content"
                     style="top: 50%;left: 50%;transform: translate(-50%, -50%);"
@@ -179,6 +181,4 @@ const dropdownAlignment = computed(() => {
 
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

cypress/e2e/contexts/torrent/specs/list/no_torrents_to_display.cy.ts

@@ -7,6 +7,6 @@ describe("Users", () => {
   it("Should be able to see the list page when there are no torrents", () => {
     cy.visit("/torrents");
     cy.url().should("match", /\/torrents$/);
-    cy.get("[data-cy=\"no-results-element\"]").invoke("text").should("match", /No results./i);
+    cy.get("[data-cy=\"no-results-element\"] img").should("have.attr", "src", "/spinner.gif");
   });
 });

pages/torrents.vue

@@ -28,7 +28,12 @@
         <button class="tab" :class="{ 'tab-active': layout === 'default' }" @click="layout = 'default'">
           Default
         </button>
-        <button data-cy="torrents-table-layout-selector" class="tab" :class="{ 'tab-active': layout === 'table' }" @click="layout = 'table'">
+        <button
+          data-cy="torrents-table-layout-selector"
+          class="tab"
+          :class="{ 'tab-active': layout === 'table' }"
+          @click="layout = 'table'"
+        >
           Table
         </button>
       </div>
@@ -43,10 +48,16 @@
             <template v-else-if="layout === 'table'">
               <TorrentTable :torrents="torrents" />
             </template>
-            <Pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total-results="torrentsTotal" />
+            <Pagination
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              :total-results="torrentsTotal"
+            />
           </template>
           <template v-else>
-            <span data-cy="no-results-element" class="text-neutral-content">No results.</span>
+            <span data-cy="no-results-element" class="text-neutral-content flex items-center justify-center">
+              <img src="/spinner.gif" class="w-20 h-20" alt="Loading Spinner">
+            </span>
           </template>
         </div>
       </div>
@@ -154,6 +165,4 @@ function loadTorrents () {
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>