diff --git a/src/components/ui/VnList.vue b/src/components/ui/VnList.vue
new file mode 100644
index 00000000..aeb27922
--- /dev/null
+++ b/src/components/ui/VnList.vue
@@ -0,0 +1,38 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+    emptyMessage: {
+        type: String,
+        default: 'emptyList'
+    },
+    emptyIcon: {
+        type: String,
+        default: 'block'
+    },
+    rows: {
+        type: Array,
+        default: () => []
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <QList v-bind="$attrs" class="column items-center">
+        <span
+            v-if="!rows?.length"
+            class="flex items-center q-pa-md justify-center items-center"
+        >
+            <QIcon :name="emptyIcon" size="sm" class="q-mr-sm" />
+            {{ t(emptyMessage) }}
+        </span>
+        <QSpinner v-if="loading" color="primary" size="3em" :thickness="2" />
+        <slot v-else />
+    </QList>
+</template>
diff --git a/src/i18n/ca-ES/index.js b/src/i18n/ca-ES/index.js
index c21533d9..c61d7daf 100644
--- a/src/i18n/ca-ES/index.js
+++ b/src/i18n/ca-ES/index.js
@@ -106,6 +106,8 @@ export default {
     shoppingCart: 'Cistella de la compra',
     available: 'Disponible',
     minQuantity: 'Quantitat mínima',
+    introduceSearchTerm: 'Introdueix un terme de cerca',
+    noOrdersFound: `No s'han trobat comandes`,
     // Image related translations
     'Cant lock cache': 'No es pot bloquejar la memòria cau',
     'Bad file format': 'Format de fitxer no reconegut',
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index 6938af07..95eafbab 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -139,6 +139,8 @@ export default {
     shoppingCart: 'Shopping cart',
     available: 'Available',
     minQuantity: 'Minimum quantity',
+    introduceSearchTerm: 'Enter a search term',
+    noOrdersFound: 'No orders found',
     // Image related translations
     'Cant lock cache': 'The cache could not be blocked',
     'Bad file format': 'Unrecognized file format',
diff --git a/src/i18n/es-ES/index.js b/src/i18n/es-ES/index.js
index d826b2d8..ffc1ffef 100644
--- a/src/i18n/es-ES/index.js
+++ b/src/i18n/es-ES/index.js
@@ -138,6 +138,8 @@ export default {
     shoppingCart: 'Cesta de la compra',
     available: 'Disponible',
     minQuantity: 'Cantidad mínima',
+    introduceSearchTerm: 'Introduce un término de búsqueda',
+    noOrdersFound: 'No se encontrado pedidos',
     // Image related translations
     'Cant lock cache': 'La caché no pudo ser bloqueada',
     'Bad file format': 'Formato de archivo no reconocido',
diff --git a/src/i18n/fr-FR/index.js b/src/i18n/fr-FR/index.js
index 549eae58..db69c3c0 100644
--- a/src/i18n/fr-FR/index.js
+++ b/src/i18n/fr-FR/index.js
@@ -106,6 +106,8 @@ export default {
     shoppingCart: 'Panier',
     available: 'Disponible',
     minQuantity: 'Quantité minimum',
+    introduceSearchTerm: 'Entrez un terme de recherche',
+    noOrdersFound: 'Aucune commande trouvée',
     // Image related translations
     'Cant lock cache': "Le cache n'a pas pu être verrouillé",
     'Bad file format': 'Format de fichier non reconnu',
diff --git a/src/i18n/pt-PT/index.js b/src/i18n/pt-PT/index.js
index 80b9a222..059ef103 100644
--- a/src/i18n/pt-PT/index.js
+++ b/src/i18n/pt-PT/index.js
@@ -104,6 +104,8 @@ export default {
     shoppingCart: 'Cesta da compra',
     available: 'Disponível',
     minQuantity: 'Quantidade mínima',
+    introduceSearchTerm: 'Digite um termo de pesquisa',
+    noOrdersFound: 'Nenhum pedido encontrado',
     // Image related translations
     'Cant lock cache': 'O cache não pôde ser bloqueado',
     'Bad file format': 'Formato de arquivo inválido',
diff --git a/src/pages/Account/AddressList.vue b/src/pages/Account/AddressList.vue
index 0b91d52c..ebfadb67 100644
--- a/src/pages/Account/AddressList.vue
+++ b/src/pages/Account/AddressList.vue
@@ -4,6 +4,7 @@ import { ref, onMounted, inject } from 'vue';
 import { useRouter } from 'vue-router';
 
 import CardList from 'src/components/ui/CardList.vue';
+import VnList from 'src/components/ui/VnList.vue';
 
 import useNotify from 'src/composables/useNotify.js';
 import { useVnConfirm } from 'src/composables/useVnConfirm.js';
@@ -104,7 +105,11 @@ onMounted(async () => {
         </QBtn>
     </Teleport>
     <QPage class="vn-w-sm">
-        <QList class="rounded-borders shadow-1 shadow-transition" separator>
+        <VnList
+            class="rounded-borders shadow-1 shadow-transition"
+            separator
+            :rows="addresses"
+        >
             <CardList
                 v-for="(address, index) in addresses"
                 :key="index"
@@ -158,7 +163,7 @@ onMounted(async () => {
                     </QBtn>
                 </template>
             </CardList>
-        </QList>
+        </VnList>
     </QPage>
 </template>
 
diff --git a/src/pages/Admin/AccessLogView.vue b/src/pages/Admin/AccessLogView.vue
index b93a64f5..45a71af2 100644
--- a/src/pages/Admin/AccessLogView.vue
+++ b/src/pages/Admin/AccessLogView.vue
@@ -3,6 +3,7 @@ import { onMounted, inject, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import CardList from 'src/components/ui/CardList.vue';
+import VnList from 'src/components/ui/VnList.vue';
 
 import { formatDateTitle } from 'src/lib/filters.js';
 
@@ -72,7 +73,7 @@ onMounted(async () => {
                 <span>{{ user?.phone }} </span>
             </template>
         </CardList>
-        <QList>
+        <VnList :rows="accessLogs">
             <CardList
                 v-for="(accessLog, index) in accessLogs"
                 :key="index"
@@ -101,6 +102,6 @@ onMounted(async () => {
                     </span>
                 </template>
             </CardList>
-        </QList>
+        </VnList>
     </QPage>
 </template>
diff --git a/src/pages/Admin/ConnectionsView.vue b/src/pages/Admin/ConnectionsView.vue
index eec50614..175f32c7 100644
--- a/src/pages/Admin/ConnectionsView.vue
+++ b/src/pages/Admin/ConnectionsView.vue
@@ -4,6 +4,7 @@ import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
 import CardList from 'src/components/ui/CardList.vue';
+import VnList from 'src/components/ui/VnList.vue';
 
 import { date as qdate } from 'quasar';
 import { useUserStore } from 'stores/user';
@@ -80,15 +81,12 @@ onBeforeUnmount(() => clearInterval(intervalId.value));
         </div>
     </Teleport>
     <QPage class="vn-w-xs">
-        <QList class="flex justify-center">
-            <QSpinner
-                v-if="loading"
-                color="primary"
-                size="3em"
-                :thickness="2"
-            />
+        <VnList
+            class="flex justify-center"
+            :loading="loading"
+            :rows="connections"
+        >
             <CardList
-                v-else
                 v-for="(connection, index) in connections"
                 :key="index"
                 :to="{ name: 'accessLog', params: { id: connection.userId } }"
@@ -133,8 +131,7 @@ onBeforeUnmount(() => clearInterval(intervalId.value));
                     </QBtn>
                 </template>
             </CardList>
-            <pre>{{ connections }}</pre>
-        </QList>
+        </VnList>
     </QPage>
 </template>
 
diff --git a/src/pages/Admin/ItemsView.vue b/src/pages/Admin/ItemsView.vue
index bbcefc60..27d9dce6 100644
--- a/src/pages/Admin/ItemsView.vue
+++ b/src/pages/Admin/ItemsView.vue
@@ -1,15 +1,14 @@
 <script setup>
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
 
 import CardList from 'src/components/ui/CardList.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
 import VnSearchBar from 'src/components/ui/VnSearchBar.vue';
+import VnList from 'src/components/ui/VnList.vue';
 
 import { useAppStore } from 'stores/app';
 import { storeToRefs } from 'pinia';
 
-const { t } = useI18n();
 const appStore = useAppStore();
 const { isHeaderMounted } = storeToRefs(appStore);
 
@@ -39,19 +38,14 @@ const onSearch = data => (items.value = data || []);
         />
     </Teleport>
     <QPage class="vn-w-xs">
-        <QList class="flex justify-center">
-            <span v-if="!loading && !items.length" class="flex items-center">
-                <QIcon name="refresh" size="sm" class="q-mr-sm" />
-                {{ t('introduceSearchTerm') }}
-            </span>
-            <QSpinner
-                v-if="loading"
-                color="primary"
-                size="3em"
-                :thickness="2"
-            />
+        <VnList
+            class="flex justify-center"
+            empty-message="introduceSearchTerm"
+            empty-icon="refresh"
+            :loading="loading"
+            :rows="items"
+        >
             <CardList
-                v-else
                 v-for="(item, index) in items"
                 :key="index"
                 :clickable="false"
@@ -82,19 +76,6 @@ const onSearch = data => (items.value = data || []);
                     <span>{{ item.image }}</span>
                 </template>
             </CardList>
-        </QList>
+        </VnList>
     </QPage>
 </template>
-
-<i18n lang="yaml">
-en-US:
-    introduceSearchTerm: Enter a search term
-es-ES:
-    introduceSearchTerm: Introduce un término de búsqueda
-ca-ES:
-    introduceSearchTerm: Introdueix un terme de cerca
-fr-FR:
-    introduceSearchTerm: Entrez un terme de recherche
-pt-PT:
-    introduceSearchTerm: Digite um termo de pesquisa
-</i18n>
diff --git a/src/pages/Admin/NewsView.vue b/src/pages/Admin/NewsView.vue
index c0f363a3..d94c6d84 100644
--- a/src/pages/Admin/NewsView.vue
+++ b/src/pages/Admin/NewsView.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import CardList from 'src/components/ui/CardList.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
+import VnList from 'src/components/ui/VnList.vue';
 
 import { useAppStore } from 'stores/app';
 import { storeToRefs } from 'pinia';
@@ -22,12 +23,14 @@ const news = ref([]);
 
 const getNews = async () => {
     try {
+        loading.value = true;
         news.value = await jApi.query(
             `SELECT n.id, u.nickname, n.priority, n.image, n.title
             FROM news n
             JOIN account.user u ON u.id = n.userFk
             ORDER BY priority, n.created DESC`
         );
+        loading.value = false;
     } catch (error) {
         console.error('Error getting news:', error);
     }
@@ -66,15 +69,8 @@ onMounted(async () => getNews());
         </QBtn>
     </Teleport>
     <QPage class="vn-w-sm">
-        <QList class="flex justify-center">
-            <QSpinner
-                v-if="loading"
-                color="primary"
-                size="3em"
-                :thickness="2"
-            />
+        <VnList class="flex justify-center" :loading="loading" :rows="news">
             <CardList
-                v-else
                 v-for="(newsItem, index) in news"
                 :key="index"
                 :to="{ name: 'adminNewsDetails', params: { id: newsItem.id } }"
@@ -115,7 +111,7 @@ onMounted(async () => getNews());
                     </QBtn>
                 </template>
             </CardList>
-        </QList>
+        </VnList>
     </QPage>
 </template>
 
diff --git a/src/pages/Admin/UsersView.vue b/src/pages/Admin/UsersView.vue
index 0ba48a7e..babd3008 100644
--- a/src/pages/Admin/UsersView.vue
+++ b/src/pages/Admin/UsersView.vue
@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router';
 
 import CardList from 'src/components/ui/CardList.vue';
 import VnSearchBar from 'src/components/ui/VnSearchBar.vue';
+import VnList from 'src/components/ui/VnList.vue';
 
 import { useAppStore } from 'stores/app';
 import { storeToRefs } from 'pinia';
@@ -49,19 +50,14 @@ const supplantUser = async user => {
         />
     </Teleport>
     <QPage class="vn-w-xs">
-        <QList class="flex justify-center">
-            <span v-if="!loading && !users.length" class="flex items-center">
-                <QIcon name="refresh" size="sm" class="q-mr-sm" />
-                {{ t('noData') }}
-            </span>
-            <QSpinner
-                v-if="loading"
-                color="primary"
-                size="3em"
-                :thickness="2"
-            />
+        <VnList
+            class="flex justify-center"
+            empty-message="noData"
+            empty-icon="refresh"
+            :loading="loading"
+            :rows="users"
+        >
             <CardList
-                v-else
                 v-for="(user, index) in users"
                 :key="index"
                 :to="{ name: 'accessLog', params: { id: user.id } }"
@@ -87,7 +83,7 @@ const supplantUser = async user => {
                     <QBadge v-else color="negative">{{ t('Disabled') }}</QBadge>
                 </template>
             </CardList>
-        </QList>
+        </VnList>
     </QPage>
 </template>
 
diff --git a/src/pages/Ecomerce/OrdersView.vue b/src/pages/Ecomerce/OrdersView.vue
index f801b090..7b10a53a 100644
--- a/src/pages/Ecomerce/OrdersView.vue
+++ b/src/pages/Ecomerce/OrdersView.vue
@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import CardList from 'src/components/ui/CardList.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnList from 'src/components/ui/VnList.vue';
 
 import useNotify from 'src/composables/useNotify.js';
 import { currency, formatDateTitle } from 'src/lib/filters.js';
@@ -90,13 +91,7 @@ const onConfirmPay = async () => {
         </QBtn>
     </Teleport>
     <QPage class="vn-w-sm">
-        <div
-            v-if="!orders?.length"
-            class="text-subtitle1 text-center text-grey-7 q-pa-md"
-        >
-            {{ t('noOrdersFound') }}
-        </div>
-        <QList v-if="orders?.length">
+        <VnList empty-message="noOrdersFound" :loading="loading" :rows="orders">
             <CardList
                 v-for="order in orders"
                 :key="order.id"
@@ -115,7 +110,7 @@ const onConfirmPay = async () => {
                     <QItemLabel>{{ order.agency }}</QItemLabel>
                 </template>
             </CardList>
-        </QList>
+        </VnList>
         <QPageSticky>
             <QBtn
                 fab
@@ -172,7 +167,6 @@ const onConfirmPay = async () => {
 <i18n lang="yaml">
 en-US:
     startOrder: Start order
-    noOrdersFound: No orders found
     makePayment: Make payment
     balance: 'Balance:'
     paymentInfo: >-
@@ -184,7 +178,6 @@ en-US:
     amountError: The amount must be a positive number less than or equal to the outstanding amount
 es-ES:
     startOrder: Empezar pedido
-    noOrdersFound: No se encontrado pedidos
     makePayment: Realizar pago
     balance: 'Saldo:'
     paymentInfo: >-
@@ -197,7 +190,6 @@ es-ES:
     amountError: La cantidad debe ser un número positivo e inferior o igual al importe pendiente
 ca-ES:
     startOrder: Començar encàrrec
-    noOrdersFound: No s'han trobat comandes
     makePayment: Realitzar pagament
     balance: 'Saldo:'
     paymentInfo: >-
@@ -210,7 +202,6 @@ ca-ES:
     amountError: La quantitat ha de ser un nombre positiu i inferior o igual a l'import pendent
 fr-FR:
     startOrder: Acheter
-    noOrdersFound: Aucune commande trouvée
     makePayment: Effectuer un paiement
     balance: 'Balance:'
     paymentInfo: >-
@@ -223,7 +214,6 @@ fr-FR:
     amountError: La quantité doit être un neméro positif et inférieur ou égal  à la somme restant à payer
 pt-PT:
     startOrder: Iniciar encomenda
-    noOrdersFound: Nenhum pedido encontrado
     makePayment: Realizar pagamento
     balance: 'Saldo:'
     paymentInfo: >-
diff --git a/src/pages/Ecomerce/PendingOrders.vue b/src/pages/Ecomerce/PendingOrders.vue
index 38053da8..9b5966df 100644
--- a/src/pages/Ecomerce/PendingOrders.vue
+++ b/src/pages/Ecomerce/PendingOrders.vue
@@ -4,6 +4,8 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
 import CardList from 'src/components/ui/CardList.vue';
+import VnList from 'src/components/ui/VnList.vue';
+
 import { currency, formatDateTitle } from 'src/lib/filters.js';
 import { useVnConfirm } from 'src/composables/useVnConfirm.js';
 import useNotify from 'src/composables/useNotify.js';
@@ -18,10 +20,12 @@ const appStore = useAppStore();
 const { isHeaderMounted } = storeToRefs(appStore);
 const router = useRouter();
 
+const loading = ref(false);
 const orders = ref([]);
 
 const getOrders = async () => {
     try {
+        loading.value = true;
         orders.value = await jApi.query(
             `SELECT o.id, o.sent, o.deliveryMethodFk, o.taxableBase,
         a.nickname, am.description agency
@@ -31,6 +35,7 @@ const getOrders = async () => {
         WHERE NOT o.isConfirmed
         ORDER BY o.sent DESC`
         );
+        loading.value = false;
     } catch (error) {
         console.error('Error getting orders:', error);
     }
@@ -78,45 +83,47 @@ onMounted(async () => {
         </QBtn>
     </Teleport>
     <QPage class="vn-w-sm">
-        <CardList
-            v-for="(order, index) in orders"
-            :key="index"
-            :to="{ name: 'basket', params: { id: order.id } }"
-        >
-            <template #content>
-                <QItemLabel class="text-bold q-mb-sm">
-                    {{ formatDateTitle(order.sent) }}
-                </QItemLabel>
-                <QItemLabel> #{{ order.id }} </QItemLabel>
-                <QItemLabel>{{ order.nickname }}</QItemLabel>
-                <QItemLabel>{{ order.agency }}</QItemLabel>
-                <QItemLabel>{{ currency(order.taxableBase) }}</QItemLabel>
-            </template>
-            <template #actions>
-                <QBtn
-                    icon="delete"
-                    flat
-                    rounded
-                    @click.stop.prevent="
-                        openConfirmationModal(
-                            null,
-                            t('areYouSureDeleteOrder'),
-                            () => removeOrder(order.id, index)
-                        )
-                    "
-                >
-                    <QTooltip>{{ t('deleteOrder') }}</QTooltip>
-                </QBtn>
-                <QBtn
-                    icon="shopping_bag"
-                    flat
-                    rounded
-                    @click.stop.prevent="loadOrder(order.id)"
-                >
-                    <QTooltip>{{ t('loadOrderIntoCart') }}</QTooltip>
-                </QBtn>
-            </template>
-        </CardList>
+        <VnList :rows="orders" :loading="loading">
+            <CardList
+                v-for="(order, index) in orders"
+                :key="index"
+                :to="{ name: 'basket', params: { id: order.id } }"
+            >
+                <template #content>
+                    <QItemLabel class="text-bold q-mb-sm">
+                        {{ formatDateTitle(order.sent) }}
+                    </QItemLabel>
+                    <QItemLabel> #{{ order.id }} </QItemLabel>
+                    <QItemLabel>{{ order.nickname }}</QItemLabel>
+                    <QItemLabel>{{ order.agency }}</QItemLabel>
+                    <QItemLabel>{{ currency(order.taxableBase) }}</QItemLabel>
+                </template>
+                <template #actions>
+                    <QBtn
+                        icon="delete"
+                        flat
+                        rounded
+                        @click.stop.prevent="
+                            openConfirmationModal(
+                                null,
+                                t('areYouSureDeleteOrder'),
+                                () => removeOrder(order.id, index)
+                            )
+                        "
+                    >
+                        <QTooltip>{{ t('deleteOrder') }}</QTooltip>
+                    </QBtn>
+                    <QBtn
+                        icon="shopping_bag"
+                        flat
+                        rounded
+                        @click.stop.prevent="loadOrder(order.id)"
+                    >
+                        <QTooltip>{{ t('loadOrderIntoCart') }}</QTooltip>
+                    </QBtn>
+                </template>
+            </CardList>
+        </VnList>
     </QPage>
 </template>