From a18d73d76deac153cd9d9b18beeb1ee399339bb6 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Thu, 7 Nov 2024 16:12:28 +0700
Subject: [PATCH] feat: delay animation so that it start different

---
 src/components/05_quotation/QuotationCard.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/05_quotation/QuotationCard.vue b/src/components/05_quotation/QuotationCard.vue
index 61a7489f..ee5be4b2 100644
--- a/src/components/05_quotation/QuotationCard.vue
+++ b/src/components/05_quotation/QuotationCard.vue
@@ -4,6 +4,7 @@ import { formatNumberDecimal } from 'src/stores/utils';
 import BadgeComponent from 'components/BadgeComponent.vue';
 import KebabAction from '../shared/KebabAction.vue';
 import MainButton from '../button/MainButton.vue';
+import { onMounted } from 'vue';
 
 defineProps<{
   title?: string;
@@ -29,11 +30,14 @@ defineEmits<{
   (e: 'example'): void;
   (e: 'preview'): void;
 }>();
+
+const rand = Math.random() * 2;
 </script>
 <template>
   <div
     class="surface-1 rounded q-pa-sm quo-card bordered"
     :class="{ 'urgent-card': urgent }"
+    :style="{ '--animation-delay': rand + 's' }"
   >
     <!-- SEC: header -->
     <header class="row items-center no-wrap">
@@ -194,6 +198,7 @@ span {
   background-color: hsla(var(--red-7-hsl) / 0.07) !important;
   border: 0.5px solid var(--red-6) !important;
   animation: status 1s infinite;
+  animation-delay: var(--animation-delay);
 
   .code {
     color: var(--red-6);