From 540a1d224460df1abb3c8ff9c5631f17c0ea1457 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 16 Dec 2025 14:28:05 +0530
Subject: [PATCH] feat: add captain loader

---
 .../conversation/CopilotEditorSection.vue     | 25 ++-------
 .../conversation/copilot/CaptainLoader.vue    | 52 +++++++++++++++++++
 2 files changed, 55 insertions(+), 22 deletions(-)
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/copilot/CaptainLoader.vue

diff --git a/app/javascript/dashboard/components/widgets/conversation/CopilotEditorSection.vue b/app/javascript/dashboard/components/widgets/conversation/CopilotEditorSection.vue
index 736a4875e..8e15e8ee5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/CopilotEditorSection.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/CopilotEditorSection.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 import CopilotEditor from 'dashboard/components/widgets/WootWriter/CopilotEditor.vue';
-import Icon from 'next/icon/Icon.vue';
+import CaptainLoader from 'dashboard/components/widgets/conversation/copilot/CaptainLoader.vue';
 
 defineProps({
   showCopilotEditor: {
@@ -66,13 +66,10 @@ const clearEditorSelection = () => {
     <div
       v-else-if="isGeneratingContent"
       key="loading-state"
-      class="bg-n-iris-5 rounded min-h-16 w-full mb-4 p-4 flex items-start animate-pulse-scale"
+      class="bg-n-iris-5 rounded min-h-16 w-full mb-4 p-4 flex items-start"
     >
       <div class="flex items-center gap-2">
-        <Icon
-          icon="i-fluent-bubble-multiple-20-filled"
-          class="text-n-iris-10 size-4 animate-spin"
-        />
+        <CaptainLoader class="text-n-iris-10 size-6" />
         <span class="text-sm text-n-iris-10">
           {{ $t('CONVERSATION.REPLYBOX.COPILOT_THINKING') }}
         </span>
@@ -87,20 +84,4 @@ const clearEditorSelection = () => {
     display: none;
   }
 }
-
-@keyframes pulse-scale {
-  0%,
-  100% {
-    transform: scale(1);
-    opacity: 0.9;
-  }
-  50% {
-    transform: scale(1.005);
-    opacity: 1;
-  }
-}
-
-.animate-pulse-scale {
-  animation: pulse-scale 1.5s ease-in-out infinite;
-}
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/copilot/CaptainLoader.vue b/app/javascript/dashboard/components/widgets/conversation/copilot/CaptainLoader.vue
new file mode 100644
index 000000000..bb026a109
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/copilot/CaptainLoader.vue
@@ -0,0 +1,52 @@
+<template>
+  <svg
+    v-once
+    viewBox="0 0 28 28"
+    fill="none"
+    class="jumping-logo"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g class="character">
+      <path
+        d="M10.2766 11.9346C10.2766 11.5593 10.5808 11.255 10.9562 11.255V11.255C11.3315 11.255 11.6358 11.5593 11.6358 11.9346V13.5053C11.6358 13.8806 11.3315 14.1849 10.9562 14.1849V14.1849C10.5808 14.1849 10.2766 13.8806 10.2766 13.5053V11.9346Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.4514 11.9346C12.4514 11.5593 12.7556 11.255 13.131 11.255V11.255C13.5063 11.255 13.8106 11.5593 13.8106 11.9346V13.5053C13.8106 13.8806 13.5063 14.1849 13.131 14.1849V14.1849C12.7556 14.1849 12.4514 13.8806 12.4514 13.5053V11.9346Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.7282 9.39092C15.1974 9.03385 13.1343 9.01976 10.5466 9.38935C9.89253 9.48277 9.45974 9.54591 9.12976 9.64235C8.82378 9.73177 8.64977 9.8384 8.50584 9.99925C8.20779 10.3323 8.16851 10.7091 8.12789 12.023C8.08796 13.3143 8.16704 14.4715 8.31682 15.7737C8.39664 16.4675 8.45156 16.9358 8.53925 17.2918C8.62244 17.6295 8.72304 17.8111 8.86287 17.9501C9.00381 18.0902 9.18443 18.189 9.51593 18.2692C9.86659 18.354 10.3267 18.4053 11.0105 18.4799C13.2219 18.7212 14.8773 18.72 17.097 18.4812C17.7891 18.4067 18.2567 18.3554 18.6126 18.2711C18.9507 18.1911 19.1325 18.093 19.2715 17.9569C19.4076 17.8236 19.5116 17.6398 19.6017 17.2853C19.6958 16.9154 19.7598 16.426 19.8525 15.707C20.0178 14.4242 20.1368 13.2976 20.1414 12.0634C20.1463 10.7439 20.1194 10.3684 19.8179 10.0202C19.6724 9.85197 19.4954 9.74137 19.1824 9.64927C18.8445 9.54981 18.4 9.4857 17.7282 9.39092ZM10.3886 8.28297C13.0843 7.89796 15.2531 7.91304 17.8843 8.28428L17.9228 8.28971C18.5458 8.37758 19.0721 8.45182 19.4979 8.57713C19.9575 8.71238 20.3418 8.91768 20.663 9.28876C21.2688 9.98876 21.2649 10.8193 21.2596 11.9227C21.2594 11.9705 21.2592 12.0188 21.259 12.0676C21.2541 13.3725 21.1278 14.5541 20.9609 15.8498L20.9565 15.8841C20.8694 16.5602 20.7976 17.1174 20.6848 17.5608C20.5662 18.0271 20.389 18.4268 20.0535 18.7554C19.7209 19.0811 19.3278 19.2503 18.87 19.3587C18.4377 19.461 17.8998 19.5189 17.2514 19.5886L17.2166 19.5924C14.918 19.8396 13.1818 19.841 10.8893 19.5909L10.8539 19.587C10.2146 19.5173 9.68223 19.4592 9.25317 19.3555C8.79707 19.2451 8.40665 19.0724 8.07492 18.7427C7.74207 18.4118 7.56725 18.0185 7.45409 17.5591C7.34735 17.1258 7.28531 16.5863 7.21059 15.9365L7.20654 15.9014C7.05293 14.566 6.96868 13.3513 7.01082 11.9884C7.01235 11.939 7.01381 11.8901 7.01526 11.8417C7.04801 10.7465 7.07258 9.92502 7.67297 9.25403C7.99151 8.89802 8.36802 8.70062 8.81625 8.56962C9.23195 8.44813 9.74451 8.37494 10.3512 8.28832C10.3636 8.28654 10.3761 8.28476 10.3886 8.28297Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.jumping-logo {
+  transform-origin: center bottom;
+  animation: jump 1s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
+  will-change: transform;
+}
+
+@keyframes jump {
+  0% {
+    transform: translateY(0) scale(1, 1);
+  }
+  20% {
+    transform: translateY(0) scale(1.05, 0.95);
+  }
+  50% {
+    transform: translateY(-5px) scale(0.95, 1.05);
+  }
+  80% {
+    transform: translateY(0) scale(1.02, 0.98);
+  }
+  100% {
+    transform: translateY(0) scale(1, 1);
+  }
+}
+</style>