feat: add in progress message

app/javascript/dashboard/components-next/message/MessageStatus.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
+import { useIntervalFn } from '@vueuse/core';
 import { MESSAGE_STATUS } from './constants';
 
 import Icon from 'next/icon/Icon.vue';
@@ -12,6 +13,34 @@ const { status } = defineProps({
   },
 });
 
+const progresIconSequence = [
+  'i-lucide-clock-1',
+  'i-lucide-clock-2',
+  'i-lucide-clock-3',
+  'i-lucide-clock-4',
+  'i-lucide-clock-5',
+  'i-lucide-clock-6',
+  'i-lucide-clock-7',
+  'i-lucide-clock-8',
+  'i-lucide-clock-9',
+  'i-lucide-clock-10',
+  'i-lucide-clock-11',
+  'i-lucide-clock-12',
+];
+
+const progessIcon = ref(progresIconSequence[0]);
+
+const rotateIcon = () => {
+  const currentIndex = progresIconSequence.indexOf(progessIcon.value);
+  const nextIndex = (currentIndex + 1) % progresIconSequence.length;
+  progessIcon.value = progresIconSequence[nextIndex];
+};
+
+useIntervalFn(rotateIcon, 500, {
+  immediate: status === MESSAGE_STATUS.PROGRESS,
+  immediateCallback: false,
+});
+
 const statusIcon = computed(() => {
   const statusIconMap = {
     [MESSAGE_STATUS.SENT]: 'i-lucide-check',
@@ -34,5 +63,10 @@ const statusColor = computed(() => {
 </script>
 
 <template>
-  <Icon :icon="statusIcon" :class="statusColor" class="size-[14px]" />
+  <Icon
+    v-if="status === MESSAGE_STATUS.PROGRESS"
+    :icon="progessIcon"
+    class="text-n-slate-10"
+  />
+  <Icon v-else :icon="statusIcon" :class="statusColor" class="size-[14px]" />
 </template>

app/javascript/dashboard/components-next/message/Messages.story.vue

@@ -505,7 +505,7 @@ const messages = camelcaseKeys(
     },
     {
       conversation_id: 43,
-      status: 'read',
+      status: 'progress',
       content_type: 'text',
       processed_message_content: ' Happy to help :)',
       id: 5285,

app/javascript/dashboard/components-next/message/constants.js

@@ -31,4 +31,5 @@ export const MESSAGE_STATUS = {
   DELIVERED: 'delivered',
   READ: 'read',
   FAILED: 'failed',
+  PROGRESS: 'progress',
 };