commit updated code 26082025-01133

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="ChatMate is a friendly and conversational AI assistant"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

src/components/ChatApp.jsx

@@ -3,6 +3,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import MessageBubble from './MessageBubble';
 import { Button , Typography, Box} from '@mui/material';
 import { ChatBubbleOutline } from '@mui/icons-material';
+import PipelineLoader from './PipelineLoader';
 export default function ChatApp() {
   const [message, setMessage] = useState('');
   const [history, setHistory] = useState([]);
@@ -121,11 +122,12 @@ setHistory(h => [...h, { role: 'assistant', content, time }]);
     <MessageBubble key={i} {...msg} />
   ))}
 
-  {loading && (
+    {/* {loading && (
     <div className="typing-indicator">
       <span className="dot"></span><span className="dot"></span><span className="dot"></span>
     </div>
-  )}
+  )} */}
+{loading && <PipelineLoader />}
 
   <div ref={chatEndRef} />
 </div>

src/components/PipelineLoader.css

@@ -0,0 +1,53 @@
+.pipeline-loader {
+  display: flex;
+  align-items: center;
+  font-family: "Outfit", sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+  color: #333;
+}
+
+.label {
+  margin-bottom: 6px;
+  transition: opacity 0.5s ease-in-out;
+  color: #fff;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.fade {
+  opacity: 1;
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* Progress bar */
+.flow {
+  width: 220px;
+  height: 6px;
+  background: #e9ecef;
+  border-radius: 6px;
+  position: relative;
+  overflow: hidden;
+}
+
+.flow::before {
+  content: "";
+  position: absolute;
+  left: -40%;
+  width: 40%;
+  height: 100%;
+  background: linear-gradient(90deg, #4dabf7, #74c0fc, #4dabf7);
+  border-radius: 6px;
+  animation: moveFlow 1.5s linear infinite;
+}
+
+@keyframes moveFlow {
+  0%   { left: -40%; }
+  50%  { left: 60%; }
+  100% { left: 110%; }
+}

src/components/PipelineLoader.jsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from "react";
+import "./PipelineLoader.css";
+
+const steps = [
+  "📡 Retrieving ",
+  "🧠 Analyzing ",
+  "🤖 Processing "
+];
+
+const PipelineLoader = () => {
+  const [stepIndex, setStepIndex] = useState(0);
+
+  useEffect(() => {
+    if (stepIndex < steps.length - 1) {
+      const timer = setTimeout(() => {
+        setStepIndex(stepIndex + 1);
+      }, 5000); // show each step for 2s
+      return () => clearTimeout(timer);
+    }
+  }, [stepIndex]);
+
+  return (
+    <div className="pipeline-loader">
+      
+      {/* <div className="flow"></div> */}
+      <div className="typing-indicator">
+        <span className="label fade">{steps[stepIndex]}</span>
+      <span className="dot"></span><span className="dot"></span><span className="dot"></span>
+    </div>
+    </div>
+  );
+};
+
+export default PipelineLoader;