From 785e55141cab178a761080f5c99384bb19855969 Mon Sep 17 00:00:00 2001
From: "A.J. Shulman" <Shulman.aj@gmail.com>
Date: Mon, 2 Sep 2024 14:44:29 -0400
Subject: made the progress cooler (double bounce)

---
 src/client/views/nodes/ChatBox/ChatBox.tsx      |  2 +-
 src/client/views/nodes/ChatBox/ProgressBar.scss | 54 ++++++++++++++++---------
 src/client/views/nodes/ChatBox/ProgressBar.tsx  | 18 ++++-----
 3 files changed, 44 insertions(+), 30 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/ChatBox/ChatBox.tsx b/src/client/views/nodes/ChatBox/ChatBox.tsx
index fdc0e3a17..383be0bb7 100644
--- a/src/client/views/nodes/ChatBox/ChatBox.tsx
+++ b/src/client/views/nodes/ChatBox/ChatBox.tsx
@@ -500,7 +500,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 {this.isUploadingDocs && (
                     <div className="uploading-overlay">
                         <div className="progress-container">
-                            <ProgressBar progress={this.uploadProgress} />
+                            <ProgressBar />
                             <div className="step-name">{this.currentStep}</div>
                         </div>
                     </div>
diff --git a/src/client/views/nodes/ChatBox/ProgressBar.scss b/src/client/views/nodes/ChatBox/ProgressBar.scss
index dcde666de..ff5be4a38 100644
--- a/src/client/views/nodes/ChatBox/ProgressBar.scss
+++ b/src/client/views/nodes/ChatBox/ProgressBar.scss
@@ -1,30 +1,43 @@
-.progress-circle {
+.spinner-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+.spinner {
+    width: 60px;
+    height: 60px;
     position: relative;
-    width: 120px;
-    height: 120px;
+    margin-bottom: 20px; // Space between spinner and text
 }
 
-.progress-ring {
-    transform: rotate(-90deg);
+.double-bounce1,
+.double-bounce2 {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #4a90e2;
+    opacity: 0.6;
     position: absolute;
     top: 0;
     left: 0;
+    animation: bounce 2s infinite ease-in-out;
 }
 
-.progress-ring__circle {
-    transition: 0.35s stroke-dashoffset;
-    transform: rotate(-90deg);
-    transform-origin: 50% 50%;
+.double-bounce2 {
+    animation-delay: -1s;
 }
 
-.progress-text {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 24px;
-    font-weight: bold;
-    color: #000;
+@keyframes bounce {
+    0%,
+    100% {
+        transform: scale(0);
+    }
+    50% {
+        transform: scale(1);
+    }
 }
 
 .uploading-overlay {
@@ -41,11 +54,16 @@
 }
 
 .progress-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     text-align: center;
 }
 
 .step-name {
-    margin-top: 10px;
     font-size: 18px;
     color: #333;
+    text-align: center;
+    width: 100%;
+    margin-top: -10px; // Adjust to move the text closer to the spinner
 }
diff --git a/src/client/views/nodes/ChatBox/ProgressBar.tsx b/src/client/views/nodes/ChatBox/ProgressBar.tsx
index 765ddbef5..0aa07213f 100644
--- a/src/client/views/nodes/ChatBox/ProgressBar.tsx
+++ b/src/client/views/nodes/ChatBox/ProgressBar.tsx
@@ -1,17 +1,13 @@
 import React from 'react';
-import './ProgressBar.scss'; // Create this CSS file for styling
+import './ProgressBar.scss';
 
-interface ProgressBarProps {
-    progress: number;
-}
-
-export const ProgressBar: React.FC<ProgressBarProps> = ({ progress }) => {
+export const ProgressBar: React.FC = () => {
     return (
-        <div className="progress-circle">
-            <svg className="progress-ring" width="120" height="120">
-                <circle className="progress-ring__circle" stroke="currentColor" strokeWidth="4" fill="transparent" r="56" cx="60" cy="60" style={{ strokeDasharray: 352, strokeDashoffset: 352 - (progress / 100) * 352 }} />
-            </svg>
-            <div className="progress-text">{Math.round(progress)}%</div>
+        <div className="spinner-container">
+            <div className="spinner">
+                <div className="double-bounce1"></div>
+                <div className="double-bounce2"></div>
+            </div>
         </div>
     );
 };
-- 
cgit v1.2.3-70-g09d2