From 68429c2628a055f1f677e6ed3314d58881beb934 Mon Sep 17 00:00:00 2001
From: Alfredo Gallardo <agallardol@outlook.com>
Date: Wed, 8 Nov 2023 15:36:55 -0300
Subject: [PATCH] - improve: bounce animation for dots loader (#75)

---
 apps/shinkai-visor/src/components/inbox/inbox.tsx    |  2 +-
 apps/shinkai-visor/src/components/ui/dots-loader.tsx |  6 +++---
 apps/shinkai-visor/tailwind.config.js                | 11 +++++++++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/shinkai-visor/src/components/inbox/inbox.tsx b/apps/shinkai-visor/src/components/inbox/inbox.tsx
index 0a10f209a..39e954b89 100644
--- a/apps/shinkai-visor/src/components/inbox/inbox.tsx
+++ b/apps/shinkai-visor/src/components/inbox/inbox.tsx
@@ -325,7 +325,7 @@ export const Inbox = () => {
               <span>
                 <FormattedMessage id="file-processing-alert-description" />
               </span>
-              <DotsLoader className="w-4 h-4"></DotsLoader>
+              <DotsLoader className="w-6 h-full"></DotsLoader>
             </div>
           </AlertDescription>
           <Terminal className="h-4 w-4" />
diff --git a/apps/shinkai-visor/src/components/ui/dots-loader.tsx b/apps/shinkai-visor/src/components/ui/dots-loader.tsx
index c3f9b07bf..934915783 100644
--- a/apps/shinkai-visor/src/components/ui/dots-loader.tsx
+++ b/apps/shinkai-visor/src/components/ui/dots-loader.tsx
@@ -2,9 +2,9 @@ const DotsLoader = ({ className }: { className?: string }) => {
   return (
     <div className={`${className} flex flex-col justify-center`}>
       <div className="flex flex-row space-x-1 items-center justify-center">
-        <div className="h-1 w-1 rounded-full bg-slate-100 animate-bounce [animation-delay:-0.3s]"></div>
-        <div className="h-1 w-1 rounded-full bg-slate-100 animate-bounce [animation-delay:-0.15s]"></div>
-        <div className="h-1 w-1 rounded-full bg-slate-100 animate-bounce"></div>
+        <div className="h-1 w-1 rounded-full bg-slate-100 animate-big-bounce [animation-delay:-0.3s]"></div>
+        <div className="h-1 w-1 rounded-full bg-slate-100 animate-big-bounce [animation-delay:-0.6s]"></div>
+        <div className="h-1 w-1 rounded-full bg-slate-100 animate-big-bounce [animation-delay:-0.9s]"></div>
       </div>
     </div>
   );
diff --git a/apps/shinkai-visor/tailwind.config.js b/apps/shinkai-visor/tailwind.config.js
index d0e183145..7fa4915a2 100644
--- a/apps/shinkai-visor/tailwind.config.js
+++ b/apps/shinkai-visor/tailwind.config.js
@@ -92,11 +92,22 @@ module.exports = {
           '0%, 100%': { transform: 'opacity: 1' },
           '50%': { transform: 'opacity: .5' },
         },
+        'big-bounce': {
+          '0%, 100%': {
+            transform: 'translateY(-75%)',
+            'animation-timing-function': 'cubic-bezier(0.8, 0, 1, 1)',
+          },
+          '50%': {
+            transform: 'translateY(0)',
+            'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1)',
+          }
+        }
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
         breath: 'pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;',
+        'big-bounce': 'big-bounce 1s infinite',
       },
       fontFamily: {
         inter: ['Inter', ...defaultTheme.fontFamily.sans],