paulmataruso/libredesk
1
0
Fork 0
mirror of https://github.com/abhinavxd/libredesk.git synced 2025-11-13 02:15:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: loader for conversation messages, use skeleton for message list.

Browse Source 
- move dot css to main.scss.
This commit is contained in:
Abhinav Raut
2025-02-01 23:46:43 +05:30
parent 3c2dff48cd
commit 1459d4c6ee
4 changed files with 31 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/components/ui/loader/DotLoader.vue
View File

@@ -1,50 +1,9 @@
<template>
<div class="flex flex-col items-center justify-center py-8 text-gray-600 dark:text-gray-300">
<div class="dot-spinner mb-4">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<p class="text-sm font-medium">Loading...</p>
<div class="flex flex-col items-center justify-center text-gray-600 dark:text-gray-300">
<span class="dot-loader mb-4">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</span>
</div>
</template>
<style scoped>
.dot-spinner {
display: flex;
justify-content: center;
align-items: center;
}
.dot {
width: 10px;
height: 10px;
margin: 0 5px;
background-color: currentColor;
border-radius: 50%;
display: inline-block;
animation: dot-flashing 1s infinite alternate;
}
.dot:nth-child(2) {
animation-delay: 0.2s;
}
.dot:nth-child(3) {
animation-delay: 0.4s;
}
.dot:nth-child(4) {
animation-delay: 0.6s;
}
@keyframes dot-flashing {
0% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
</style>