I have implemented a skeleton loader to display while the data is loading. However, I want to also show an empty order page if there is no data or orders coming in. I am trying to figure out the conditions for both scenarios - displaying the loader and the empty basket page. As a newcomer to Vuetify, I am currently stuck on how to achieve this. Below is my code snippet:
<template>
<v-container>
<div class="text-h2" style="margin-bottom: 20px;">
Order History
</div>
<div v-if="orders.length < 1">
<v-skeleton-loader
v-for="n in 5"
:key="n"
class="flex-row"
elevation="2"
max-width="100%"
style="margin-bottom: 20px"
transition="scale-transition"
type="list-item-avatar-three-line"
>
</v-skeleton-loader>
</div>
<v-card
v-else
v-for="order in orders"
:key="order.id"
class="mx-auto google-font mb-6"
max-width="auto">
<v-list-item-content>
<v-row>
<v-col cols="10">
<v-list-item-title class="mb-2 ml-4" style="font-size: 100%; margin-right: 5px">OrderID: {{ order.id }}</v-list-item-title>
<v-list-item-subtitle style="color: grey; font-size: 100%;" class="ml-4">Items {{ order.ITEMS.length }}</v-list-item-subtitle>
</v-col>
<v-col cols="2">
<v-list-item-title class="float-right mb-2 mr-6" style="font-size: 100%;">₹{{ order.TOTAL_COST }}</v-list-item-title>
<v-list-item-subtitle style="color: grey; font-size: 85%;" class="mr-6 float-right">{{ parseDate(order.ORDER_DATE) }}</v-list-item-subtitle>
</v-col>
</v-row>
<v-divider></v-divider>
</v-list-item-content>
<v-btn text small style="margin-bottom: 10px; margin-left: 5px;" v-on:click="switchExpand(order.id)" :color="getStoreColor">Details<v-icon>{{
expandedItems.indexOf(order.id) > -1 ? "mdi-chevron-up" : "mdi-chevron-down"
}}</v-icon></v-btn>
</v-card>
<v-btn outlined rounded :color="getStoreColor" @click="logout">Logout</v-btn>
</v-container>
</template>