Redesign jobs page UI with view modes and page transitions

frontend/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

frontend/package.json

@@ -19,6 +19,7 @@
     "@vercel/analytics": "^1.5.0",
     "@vercel/speed-insights": "^1.2.0",
     "dompurify": "^3.2.3",
+    "framer-motion": "^12.38.0",
     "isomorphic-dompurify": "^2.22.0",
     "jsdom": "^26.0.0",
     "lru-cache": "^11.2.2",

frontend/src/app/jobs/loading.tsx

@@ -4,11 +4,14 @@ import MainContentLoading from "@/components/layout/main-content-loading";
 export default function Loading() {
   return (
     <div>
-      {/* FilterSection placeholder - this should always be visible */}
-      <div className="flex flex-row justify-between items-center">
-        <div className="w-24 h-9 bg-secondary animate-pulse rounded" />
-        <div className="flex flex-row items-center">
-          <div className="w-24 h-9 bg-secondary animate-pulse rounded-lg" />
+      {/* Filter bar placeholder */}
+      <div className="flex items-center gap-3 flex-wrap">
+        <div className="w-16 h-5 bg-secondary animate-pulse rounded" />
+        <div className="flex gap-2">
+          <div className="w-16 h-7 bg-secondary animate-pulse rounded-full" />
+          <div className="w-20 h-7 bg-secondary animate-pulse rounded-full" />
+          <div className="w-16 h-7 bg-secondary animate-pulse rounded-full" />
+          <div className="w-20 h-7 bg-secondary animate-pulse rounded-full" />
         </div>
       </div>
       <MainContentLoading />

frontend/src/app/jobs/page.tsx

@@ -1,13 +1,9 @@
 // frontend/src/app/jobs/page.tsx
 import FilterSection from "@/components/filters/filter-section";
-import JobList from "@/components/jobs/job-list";
-import JobDetails from "@/components/jobs/job-details";
+import JobsContent from "@/components/jobs/jobs-content";
 import { JobFilters } from "@/types/filters";
 import { getJobs } from "@/actions/jobs.fetch";
 import NoResults from "@/components/ui/no-results";
-import { Suspense } from "react";
-import JobListLoading from "@/components/layout/job-list-loading";
-import JobDetailsLoading from "@/components/layout/job-details-loading";
 
 export const metadata = {
   title: "Jobs",
@@ -20,13 +16,7 @@ export default async function JobsPage({
 }: {
   searchParams: Promise<Partial<JobFilters>>;
 }) {
-  // https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional
-  // searchParams is a promise that resolves to an object containing the search
-  // parameters of the current URL.
-
   const filters = await searchParams;
-
-  // Fetch regular jobs with pagination.
   const { jobs, total } = await getJobs(filters);
 
   return (
@@ -36,18 +26,8 @@ export default async function JobsPage({
       {total <= 0 ? (
         <NoResults />
       ) : (
-        <div className="mt-4 flex flex-col lg:flex-row">
-          <div id="job-list-container" className="lg:pr-1 w-full lg:w-[35%]">
-            <Suspense fallback={<JobListLoading />}>
-              <JobList jobs={jobs} />
-            </Suspense>
-          </div>
-
-          <div className="hidden lg:block lg:w-[65%] overflow-y-auto h-[calc(100svh-140px)] lg:h-[calc(100svh-180px)]">
-            <Suspense fallback={<JobDetailsLoading />}>
-              <JobDetails />
-            </Suspense>
-          </div>
+        <div className="mt-4">
+          <JobsContent jobs={jobs} />
         </div>
       )}
     </>

frontend/src/app/layout.tsx

@@ -9,6 +9,9 @@ import { SpeedInsights } from "@vercel/speed-insights/next";
 import { GoogleAnalytics } from "@next/third-parties/google";
 
 import NavBar from "@/components/layout/nav-bar";
+import DotBackground from "@/components/ui/dot-background";
+import { InitialLoad } from "@/components/layout/initial-load";
+import { PageTransition } from "@/components/layout/page-transition";
 import { MantineProvider } from "@mantine/core";
 import { ColorSchemeScript } from "@mantine/core";
 import { PropsWithChildren, Suspense } from "react";
@@ -56,16 +59,21 @@ export default function RootLayout({ children }: PropsWithChildren) {
           <MantineProvider theme={theme} defaultColorScheme="dark">
             <FilterProvider>
               <div className="min-h-screen flex flex-col px-6">
+                <DotBackground />
                 <Notifications />
-                <NavBar />
-                <main className="">
-                  {children}
+                <InitialLoad>
+                  <NavBar />
+                  <main className="">
+                    <PageTransition>
+                      {children}
+                    </PageTransition>
                   <FirstVisitNotification />
                   <FeedbackButton />
                   <Analytics />
                   <SpeedInsights />
                   <GoogleAnalytics gaId="G-1RXLVCFJC0" />
                 </main>
+                </InitialLoad>
               </div>
             </FilterProvider>
           </MantineProvider>