feat: Add Processing page and integrate with UploadModal for post-upload navigation

Author: adamrefaey

frontend/src/common/components/Router/TabNavigation.tsx

@@ -18,6 +18,7 @@ import ChatPage from 'pages/Chat/ChatPage';
 import UploadPage from 'pages/Upload/UploadPage';
 import ReportDetailPage from 'pages/Reports/ReportDetailPage';
 import ReportsListPage from 'pages/Reports/ReportsListPage';
+import Processing from 'pages/Processing/Processing';
 
 /**
  * The `TabNavigation` component provides a router outlet for all of the
@@ -90,6 +91,9 @@ const TabNavigation = (): JSX.Element => {
           <Route exact path="/tabs/reports/:reportId">
             <ReportDetailPage />
           </Route>
+          <Route exact path="/tabs/processing">
+            <Processing />
+          </Route>
           <Route exact path="/">
             <Redirect to="/tabs/home" />
           </Route>

frontend/src/common/components/Upload/UploadModal.tsx

@@ -15,6 +15,8 @@ import { MedicalReport } from '../../models/medicalReport';
 import './UploadModal.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircleXmark } from '@fortawesome/free-regular-svg-icons';
+import { useHistory } from 'react-router';
+import { useTimeout } from '../../hooks/useTimeout';
 
 export interface UploadModalProps {
   isOpen: boolean;
@@ -25,6 +27,8 @@ export interface UploadModalProps {
 
 const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): JSX.Element => {
   const { t } = useTranslation();
+  const history = useHistory();
+  const { setTimeout } = useTimeout();
   const fileInputRef = useRef<HTMLInputElement>(null);
   // Track the upload result to use when the user closes the success screen
   const [uploadResult, setUploadResult] = useState<MedicalReport | null>(null);
@@ -45,6 +49,17 @@ const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): J
     // Override onUploadComplete to store the result and not call the parent immediately
     onUploadComplete: (result) => {
       setUploadResult(result);
+      
+      // Automatically redirect to processing screen after 2 seconds
+      setTimeout(() => {
+        reset();
+        onClose();
+        if (onUploadComplete) {
+          onUploadComplete(result);
+        }
+        // Navigate to the processing tab
+        history.push('/tabs/processing');
+      }, 2000);
     }
   });
 

frontend/src/common/hooks/useTimeout.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+/**
+ * Custom hook for handling setTimeout with cleanup
+ */
+export const useTimeout = () => {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Clear the timeout when component unmounts or when called manually
+  const clearTimeout = useCallback(() => {
+    if (timeoutRef.current) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  // Set a new timeout
+  const setTimeout = useCallback((callback: () => void, delay: number) => {
+    // Clear any existing timeout first
+    clearTimeout();
+    // Set the new timeout
+    timeoutRef.current = window.setTimeout(callback, delay);
+  }, [clearTimeout]);
+
+  // Clean up on unmount
+  useEffect(() => {
+    return clearTimeout;
+  }, [clearTimeout]);
+
+  return { setTimeout, clearTimeout };
+};

frontend/src/pages/Processing/Processing.scss

@@ -0,0 +1,102 @@
+.processing-page {
+  --background: #1c1c1e;
+  
+  &__container {
+    background-color: white;
+    border-radius: 32px;
+    height: 100%;
+    margin: 0;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+  
+  &__header {
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+  }
+  
+  &__avatar-wrapper {
+    margin-bottom: 20px;
+    
+    // Styles for the Avatar component - adjusted size to match design
+    .ls-avatar {
+      --size: 60px !important;
+      margin: 0;
+      
+      // This makes sure even round avatars are sized correctly
+      &.ls-avatar--round {
+        width: var(--size);
+        height: var(--size);
+      }
+    }
+  }
+  
+  &__title {
+    margin-bottom: 40px;
+  }
+  
+  &__subtitle {
+    font-size: 20px;
+    color: #9BA1AB;
+    margin: 0 0 5px 0;
+    font-weight: 400;
+  }
+  
+  &__heading {
+    font-size: 36px;
+    font-weight: 600;
+    color: #394150;
+    margin: 0;
+  }
+  
+  &__animation {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    &-circle {
+      // Adjusted animation size to match design
+      width: 180px;
+      height: 180px;
+      border-radius: 50%;
+      background: radial-gradient(circle at 30% 30%, #4f7dff 10%, #c97eff 40%, #ff8afc 80%);
+      box-shadow: 
+        0 0 40px rgba(201, 126, 255, 0.5),
+        0 0 80px rgba(201, 126, 255, 0.3);
+      position: relative;
+      overflow: hidden;
+      animation: pulse 3s infinite ease-in-out;
+      
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%);
+        border-radius: 50%;
+      }
+    }
+  }
+}
+
+// Animation for the pulse effect
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.95);
+    opacity: 0.8;
+  }
+}

frontend/src/pages/Processing/Processing.tsx

@@ -0,0 +1,50 @@
+import { IonContent, IonPage } from '@ionic/react';
+import { useCurrentUser } from '../../common/hooks/useAuth';
+import Avatar from '../../common/components/Icon/Avatar';
+import './Processing.scss';
+
+/**
+ * Processing page that shows while the system analyzes uploaded documents
+ * This page automatically displays after a successful upload
+ */
+const Processing: React.FC = () => {
+  const currentUser = useCurrentUser();
+  const firstName = currentUser?.firstName || currentUser?.name?.split(' ')[0] || 'Wesley';
+
+  return (
+    <IonPage className="processing-page">
+      <IonContent fullscreen>
+        <div className="processing-page__container">
+          {/* Header with avatar */}
+          <div className="processing-page__header">
+            <div className="processing-page__avatar-wrapper">
+              <Avatar 
+                value={currentUser?.name || currentUser?.email || ''}
+                size="large"
+                shape="round"
+                testid="processing-user-avatar"
+              />
+            </div>
+            
+            {/* Title section */}
+            <div className="processing-page__title">
+              <p className="processing-page__subtitle">
+                Just a few seconds, {firstName}!
+              </p>
+              <h1 className="processing-page__heading">Processing Data...</h1>
+            </div>
+          </div>
+          
+          {/* Animation circle */}
+          <div className="processing-page__animation">
+            <div className="processing-page__animation-circle"></div>
+          </div>
+          
+          {/* We don't need to include the tab bar here since it's global */}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Processing;