added loading icons

This commit is contained in:
Xeovalyte 2022-11-14 14:21:59 +01:00
parent 77fc118516
commit 54a9c00fea
4 changed files with 17 additions and 5 deletions

View File

@ -1,6 +1,9 @@
<template> <template>
<div v-if="!userLoaded" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col"> <div v-if="!userLoaded" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex justify-center items-center">
Loading <div>
<Icon size="4em" name="ion:load-c" class="animate-spin" />
<h2 class="mt-2 font-bold">Loading...</h2>
</div>
</div> </div>
<div v-else> <div v-else>
<div v-if="isAuthenticated" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col"> <div v-if="isAuthenticated" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">

View File

@ -8,8 +8,9 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else> <div class="w-full flex flex-col justify-center items-center" v-else>
Loading... <Icon size="2em" name="ion:load-c" class="animate-spin" />
<h2 class="mt-2 font-bold">Loading...</h2>
</div> </div>
</div> </div>
</template> </template>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md"> <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
<div class="flex flex-col gap-3"> <div v-if="news && news[0]" class="flex flex-col gap-3">
<NuxtLink to="/news/newmessage" v-if="userData.sendNews" class="item-hover border-dashed border-2 container text-center font-bold text-xl border-neutral-500 mb-3"> <NuxtLink to="/news/newmessage" v-if="userData.sendNews" class="item-hover border-dashed border-2 container text-center font-bold text-xl border-neutral-500 mb-3">
Nieuw Bericht Nieuw Bericht
</NuxtLink> </NuxtLink>
@ -13,6 +13,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-full flex flex-col justify-center items-center" v-else>
<Icon size="2em" name="ion:load-c" class="animate-spin" />
<h2 class="mt-2 font-bold">Loading...</h2>
</div>
</div> </div>
</template> </template>

View File

@ -12,6 +12,10 @@
<span @click="router.back()" class="hover:underline font-bold w-full text-center sm:w-max sm:ml-auto hover:cursor-pointer">Cancel</span> <span @click="router.back()" class="hover:underline font-bold w-full text-center sm:w-max sm:ml-auto hover:cursor-pointer">Cancel</span>
</div> </div>
</div> </div>
<div class="w-full flex flex-col justify-center items-center" v-else>
<Icon size="2em" name="ion:load-c" class="animate-spin" />
<h2 class="mt-2 font-bold">Loading...</h2>
</div>
</div> </div>
</template> </template>