fade in and out animations

orchestrator/src/client/App.tsx

@@ -2,8 +2,9 @@
  * Main App component.
  */
 
-import React from "react";
-import { Route, Routes } from "react-router-dom";
+import React, { useRef } from "react";
+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 = () => (
-  <>
-    <Routes>
-      <Route path="/" element={<OrchestratorPage />} />
-      <Route path="/settings" element={<SettingsPage />} />
-      <Route path="/ukvisajobs" element={<UkVisaJobsPage />} />
-      <Route path="/visa-sponsors" element={<VisaSponsorsPage />} />
-    </Routes>
+export const App: React.FC = () => {
+  const location = useLocation();
+  const nodeRef = useRef<HTMLDivElement>(null);
 
-    <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>