fade in and out animations

orchestrator/package.json

@@ -39,6 +39,7 @@
     "lucide-react": "^0.561.0",
     "next-themes": "^0.4.6",
     "react-markdown": "^10.1.0",
+    "react-transition-group": "^4.4.5",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
@@ -57,6 +58,7 @@
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/react-transition-group": "^4.4.12",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.22",
     "concurrently": "^9.1.0",

orchestrator/src/client/App.tsx

@@ -2,8 +2,9 @@
  * Main App component.
  */
 
-import React from "react";
+import React, { useRef } from "react";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useLocation } from "react-router-dom";
+import { CSSTransition, SwitchTransition } from "react-transition-group";
 
 import { Toaster } from "@/components/ui/sonner";
 import { OrchestratorPage } from "./pages/OrchestratorPage";
@@ -11,15 +12,32 @@ import { SettingsPage } from "./pages/SettingsPage";
 import { UkVisaJobsPage } from "./pages/UkVisaJobsPage";
 import { VisaSponsorsPage } from "./pages/VisaSponsorsPage";
 
-export const App: React.FC = () => (
+export const App: React.FC = () => {
-  <>
+  const location = useLocation();
-    <Routes>
+  const nodeRef = useRef<HTMLDivElement>(null);
-      <Route path="/" element={<OrchestratorPage />} />
-      <Route path="/settings" element={<SettingsPage />} />
-      <Route path="/ukvisajobs" element={<UkVisaJobsPage />} />
-      <Route path="/visa-sponsors" element={<VisaSponsorsPage />} />
-    </Routes>
 
-    <Toaster position="bottom-right" richColors closeButton />
+  return (
-  </>
+    <>
-);
+      <SwitchTransition mode="out-in">
+        <CSSTransition
+          key={location.pathname}
+          nodeRef={nodeRef}
+          timeout={100}
+          classNames="page"
+          unmountOnExit
+        >
+          <div ref={nodeRef}>
+            <Routes location={location}>
+              <Route path="/" element={<OrchestratorPage />} />
+              <Route path="/settings" element={<SettingsPage />} />
+              <Route path="/ukvisajobs" element={<UkVisaJobsPage />} />
+              <Route path="/visa-sponsors" element={<VisaSponsorsPage />} />
+            </Routes>
+          </div>
+        </CSSTransition>
+      </SwitchTransition>
+
+      <Toaster position="bottom-right" richColors closeButton />
+    </>
+  );
+};

orchestrator/src/client/pages/UkVisaJobsPage.tsx

@@ -400,9 +400,6 @@ export const UkVisaJobsPage: React.FC = () => {
               <div className="text-sm font-semibold tracking-tight">UK Visa Jobs</div>
               <div className="text-xs text-muted-foreground">Live search console</div>
             </div>
-            <Badge variant="outline" className="hidden sm:inline-flex uppercase tracking-wide">
-              API search
-            </Badge>
           </div>
         </div>
       </header>

orchestrator/src/index.css

@@ -261,3 +261,19 @@
     letter-spacing: var(--tracking-normal);
   }
 }
+
+/* Page transition animations */
+.page-enter {
+  opacity: 0;
+}
+.page-enter-active {
+  opacity: 1;
+  transition: opacity 100ms ease-out;
+}
+.page-exit {
+  opacity: 1;
+}
+.page-exit-active {
+  opacity: 0;
+  transition: opacity 75ms ease-in;
+}