Feature/cooler loading screen

src/popup/SlideShow.jsx

@@ -4,6 +4,7 @@ import { FaArrowRight, FaArrowLeft } from 'react-icons/fa';
 import promptsData from "./prompts.json";
 import RadarCategoryChart from './RadarCategoryChart';
 import TimeOfDayHistogram from './TimeOfDayHistogram';
+import WavyText from './WavyText';
 import CategoryTrendsLineChart from './CategoryTrendsLineChart';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer as LineContainer } from 'recharts';
 
@@ -228,30 +229,20 @@ const SlideShow = ({ setView, timeRange }) => {
     return () => clearTimeout(timer);
   }, [index, slides.length, loading, notEnoughData]);
 
-  // 🚀 LOADING SCREEN while slides are being fetched
+  //  LOADING SCREEN
   if (loading || progress < 100) {
     return (
-      <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', padding: '2rem', boxSizing: 'border-box' }}>
-        <h1 style={{ color: '#fff', textAlign: 'center', marginTop: '35vh' }}>Preparing your recap...</h1>
-        <div style={{
-          width: '75%',
-          height: '8px',
-          backgroundColor: '#555',
-          borderRadius: '5px',
-          overflow: 'hidden',
-          margin: '0 auto'
-        }}>
-          <div style={{
-            width: `${progress}%`,
-            height: '100%',
-            backgroundColor: '#00C853',
-            transition: 'width 0.5s ease-in-out'
-          }}></div>
+      <div className="loading-screen">
+        <div className="center-container">
+          <WavyText text="Preparing your recap..." />
+          <div className="progress-bar">
+            <div className="progress-bar-fill" style={{ width: `${progress}%` }}></div>
+          </div>
         </div>
       </div>
     );
   }
-
+  
   if (notEnoughData) {
     return (
       <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', padding: '2rem', boxSizing: 'border-box' }}>

src/popup/WavyText.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import './popup.css';
+
+
+const WavyText = ({ text }) => {
+    return (
+      <div className="wavy-text">
+        {text.split(/(\s+)/).map((segment, index) => {
+          if (segment.trim() === '') {
+            // Render spaces without animation
+            return <span key={index}>{segment}</span>;
+          } else {
+            // Render each character in the word with animation
+            return (
+              <span key={index}>
+                {segment.split('').map((char, charIndex) => (
+                  <span
+                    key={charIndex}
+                    className="wavy-char"
+                    style={{ '--i': charIndex }}
+                  >
+                    {char}
+                  </span>
+                ))}
+              </span>
+            );
+          }
+        })}
+      </div>
+    );
+  };
+
+  export default WavyText;

src/popup/popup.css

@@ -119,7 +119,7 @@ body {
     padding: 15px;
     font-size: 30px;
     background-color: #6F84B3;
-    color: white;
+    color: #fff;
     border: none;
     margin-bottom: 15px;
     border-radius: 15px;
@@ -137,27 +137,62 @@ body {
 button:disabled {
     display: none;
 }
-
-.spinner-overlay {
-  position: fixed;
+/* Container that covers the entire viewport */
+.loading-screen {
+  position: absolute;
   top: 0;
   left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: black;
-  opacity: 20%;
+  width: 100%;
+  height: 100%;
+  background-color: black; /* Optional: set background color */
   display: flex;
-  align-items: center;
   justify-content: center;
-  z-index: 9999; /* ensures it stays on top */
+  align-items: center;
+}
+
+/* Container that centers its content vertically */
+.center-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* Wavy text styling */
+.wavy-text {
+  display: inline-block;
+  font-size: 2rem;
+  font-weight: bold;
+  color: white;
+  text-align: center;
+  margin-bottom: 20px; /* Space between text and progress bar */
+}
+
+.wavy-char {
+  display: inline-block;
+  animation: wave 1.5s infinite;
+  animation-delay: calc(0.1s * var(--i));
+}
+
+@keyframes wave {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+/* Progress bar styling */
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background-color: #555;
+  border-radius: 5px;
+  overflow: hidden;
 }
 
-.spinner {
-  border: 6px solid #fff;
-  border-top: 6px solid #444;
-  border-radius: 50%;
-  width: 60px;
-  height: 60px;
-  animation: spin 1s linear infinite;
+.progress-bar-fill {
+  height: 100%;
+  background-color: #00C853;
+  transition: width 0.5s ease-in-out;
 }
-@keyframes spin { to { transform: rotate(360deg); } }