alces-software · CalMurph · Jul 10, 2026 · Jul 9, 2026 · Jul 10, 2026 · Jul 10, 2026
diff --git a/frontend/app/animation/page.tsx b/frontend/app/animation/page.tsx
@@ -0,0 +1,13 @@
+import Loading from '../components/Loading';
+
+export const metadata = {
+   title: 'Cluster Options'
+};
+
+export default async function AnimationPage() {
+   return (
+      <main>
+         <Loading></Loading>
+      </main>
+   );
+}
diff --git a/frontend/app/components/ClusterSettings.jsx b/frontend/app/components/ClusterSettings.jsx
@@ -7,6 +7,7 @@ import { useState, useEffect, useMemo, useCallback } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { FaDatabase, FaUser } from 'react-icons/fa';
 import { IoIosArrowForward } from 'react-icons/io';
+import Loading from '../components/Loading.jsx';
 
 export default function ClusterSettingsPage() {
    const searchParams = useSearchParams();
@@ -350,20 +351,16 @@ export default function ClusterSettingsPage() {
    }
 
    if (loadingClusters) {
-      return (
-         <main className="flex min-h-screen items-center justify-center">
-            <p className="text-white">Loading cluster...</p>
-         </main>
-      );
+      return <Loading />;
    }
 
    return (
       <main className="flex justify-center space-y-8">
          <div className="relative z-10 w-full">
             <div className="p-10 ">
                {/* Header */}
-               <div className="mb-10 text-left">
-                  <h1 className="text-5xl font-bold text-white">{cluster.name}</h1>
+               <div className="mb-10 text-center md:text-left">
+                  <h1 className="text-4xl sm:text-5xl  font-bold text-white">{cluster.name}</h1>
 
                   <p className="mt-3 text-lg text-slate-300">Cluster settings and overview</p>
 

diff --git a/frontend/app/components/Form.jsx b/frontend/app/components/Form.jsx
@@ -5,6 +5,7 @@ import Cookies from 'js-cookie';
 import { useRouter } from 'next/navigation';
 import ReactMarkdown from 'react-markdown';
 import { FaClipboardList, FaRegCopy, FaCheck, FaLightbulb } from 'react-icons/fa';
+import Loading from '../components/Loading';
 
 function getTodayTimeMs(value) {
    const numericValue = Number(value);
@@ -448,13 +449,7 @@ export default function Form() {
    }
 
    if (!clusterId || !nameID) {
-      return (
-         <main className="flex min-h-screen items-center justify-center">
-            <div className="rounded-2xl border border-white/10 bg-white/10 px-8 py-6 text-white backdrop-blur-xl">
-               Loading report...
-            </div>
-         </main>
-      );
+      return <Loading />;
    }
 
    // DELETE METHOD
@@ -545,7 +540,7 @@ export default function Form() {
          <div className="relative z-10 w-full">
             <form onSubmit={handleSubmit} className="p-10">
                {/* Header */}
-               <div className="mb-10 text-left">
+               <div className="mb-10 text-center md:text-left">
                   <h1 className="text-4xl sm:text-5xl font-bold text-white">
                      Process Documentation
                   </h1>
@@ -891,7 +886,7 @@ export default function Form() {
                                              type="button"
                                              onClick={() => checkHpcAnswer(optionIndex)}
                                              disabled={Boolean(hpcQuestionResult)}
-                                             className={`rounded-xl border px-4 py-3 text-left text-sm font-medium transition ${
+                                             className={`rounded-xl border cursor-pointer px-4 py-3 text-left text-sm font-medium transition ${
                                                 isSelected
                                                    ? 'border-cyan-300 bg-cyan-400/20 text-white'
                                                    : 'border-white/10 bg-slate-900/40 text-slate-200 hover:border-cyan-300/40 hover:bg-cyan-400/10'
@@ -922,9 +917,7 @@ export default function Form() {
                                                 : 'text-red-300'
                                           }`}
                                        >
-                                          {hpcQuestionResult.correct
-                                             ? 'Correct ✅'
-                                             : 'Not quite ❌'}
+                                          {hpcQuestionResult.correct ? 'Correct' : 'Not quite'}
                                        </p>
 
                                        <p className="mt-2 text-sm text-slate-200">

diff --git a/frontend/app/components/Header.jsx b/frontend/app/components/Header.jsx
@@ -124,7 +124,7 @@ export default function Header() {
                   aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
                   aria-expanded={mobileMenuOpen}
                   onClick={() => setMobileMenuOpen((isOpen) => !isOpen)}
-                  className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-xl border border-white/10 bg-white/10 text-2xl text-slate-100 transition hover:border-blue-300/35 hover:bg-blue-500/15 lg:hidden"
+                  className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-xl text-2xl text-slate-100 transition hover:border-blue-300/35 hover:bg-blue-500/15 lg:hidden"
                >
                   {mobileMenuOpen ? <IoClose aria-hidden="true" /> : <IoMenu aria-hidden="true" />}
                </button>

diff --git a/frontend/app/components/Loading.jsx b/frontend/app/components/Loading.jsx
@@ -0,0 +1,14 @@
+'use client';
+
+import { FaMicrochip } from 'react-icons/fa6';
+
+export default function Loading() {
+   return (
+      <main className="flex items-center h-screen pb-30 justify-center">
+         <div className="flex flex-col items-center justify-center text-center">
+            <FaMicrochip className="h-25 w-25 text-slate-500 animate-spin-quarter-pause" />
+            <p className="p-2 text-lg text-slate-500">Loading ...</p>
+         </div>
+      </main>
+   );
+}
diff --git a/frontend/app/components/Name.jsx b/frontend/app/components/Name.jsx
@@ -73,53 +73,6 @@ export default function Name() {
             <div className="p-10">
                {/* Header */}
 
-               {/* <form onSubmit={handleSubmit} className="space-y-6">
-                  <div>
-                     <label
-                        htmlFor="person"
-                        className="mb-2 block text-sm font-medium text-slate-200"
-                     >
-                        Person
-                     </label>
-
-                     <Listbox value={selectedId} onChange={setSelectedId}>
-                        <div className="relative">
-                           <ListboxButton className="w-full cursor-pointer rounded-xl border border-slate-600 bg-slate-800/80 px-4 py-3 text-left text-white backdrop-blur-md outline-none transition hover:border-white/20 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
-                              {people.find((p) => p.id === selectedId)?.name ||
-                                 'Select a person...'}
-
-                              <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
-                                 ▼
-                              </span>
-                           </ListboxButton>
-
-                           <ListboxOptions className="absolute z-50 mt-2 max-h-60 w-full overflow-auto rounded-xl border border-white/10 bg-slate-900/95 backdrop-blur-xl shadow-2xl">
-                              {people.map((person) => (
-                                 <ListboxOption
-                                    key={person.id}
-                                    value={person.id}
-                                    className="cursor-pointer px-4 py-3 text-white transition data-[active]:bg-blue-500/20 data-[selected]:font-semibold"
-                                 >
-                                    {person.name}
-                                 </ListboxOption>
-                              ))}
-                           </ListboxOptions>
-                        </div>
-                     </Listbox>
-                  </div>
-
-                  <button
-                     type="submit"
-                     disabled={!selectedId}
-                     className="flex w-full cursor-pointer items-center justify-center rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 px-4 py-3 font-semibold text-white shadow-lg transition hover:scale-[1.02] hover:from-blue-600 hover:to-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
-                  >
-                     <div className="flex items-center gap-1">
-                        Continue
-                        <IoIosArrowForward aria-hidden="true" />
-                     </div>
-                  </button>
-               </form> */}
-
                {!selectedTeamId ? (
                   <div key="select-team" className="animate-fade-up">
                      <div className="text-center">

diff --git a/frontend/app/components/Options.jsx b/frontend/app/components/Options.jsx
@@ -389,7 +389,7 @@ export default function Options() {
          <div className="relative z-10 w-full">
             <div className=" p-10">
                {/* Header */}
-               <div className="mb-10 text-left">
+               <div className="mb-10 text-center md:text-left">
                   <h1 className="text-4xl sm:text-5xl font-bold text-white">Administration</h1>
 
                   <p className="mt-3 text-lg text-slate-300">

diff --git a/frontend/app/components/Overview.jsx b/frontend/app/components/Overview.jsx
@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import DatePicker from 'react-datepicker';
 import { FaCalendarAlt } from 'react-icons/fa';
+import Loading from '../components/Loading';
 
 function dateToInputValue(date) {
    if (!date) return '';
@@ -87,11 +88,7 @@ export default function Overview() {
 
    // Show loading
    if (!reportLoaded) {
-      return (
-         <main className="flex min-h-screen items-center justify-center text-white">
-            Loading overview...
-         </main>
-      );
+      return <Loading />;
    }
 
    // Page
@@ -100,7 +97,7 @@ export default function Overview() {
          <div className="relative z-10 w-full">
             <div className="p-10 ">
                {/* Header */}
-               <div className="mb-10 text-left">
+               <div className="mb-10 text-center md:text-left">
                   <h1 className="text-4xl sm:text-5xl font-bold text-white">Reports Overview</h1>
 
                   <p className="mt-3 text-lg text-slate-300">

diff --git a/frontend/app/components/PersonalSchedule.jsx b/frontend/app/components/PersonalSchedule.jsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import Cookies from 'js-cookie';
 import { FaFolderOpen, FaInbox, FaUser } from 'react-icons/fa';
 import { IoIosArrowForward } from 'react-icons/io';
+import Loading from '../components/Loading';
 
 const CHECK_START_BUFFER_MS = 20 * 60 * 1000;
 
@@ -191,13 +192,7 @@ export default function PersonalSchedule() {
    }, [router, userId]);
 
    if (loading) {
-      return (
-         <main className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-blue-900">
-            <div className="rounded-2xl border border-white/10 bg-white/10 px-8 py-6 text-white shadow-2xl backdrop-blur-xl">
-               Loading clusters...
-            </div>
-         </main>
-      );
+      return <Loading />;
    }
 
    const handleClusterClick = (cluster) => {
@@ -212,7 +207,7 @@ export default function PersonalSchedule() {
          <div className="relative z-10 w-full">
             <div className="rounded-3xl p-10">
                {/* Header */}
-               <div className="mb-10 text-left">
+               <div className="mb-10 text-center md:text-left">
                   <h1 className="text-4xl sm:text-5xl font-bold text-white">
                      {name}&apos;s Clusters
                   </h1>

diff --git a/frontend/app/components/PoolSettingsPage.jsx b/frontend/app/components/PoolSettingsPage.jsx
@@ -3,8 +3,7 @@
 import { useEffect, useState } from 'react';
 import { FaServer } from 'react-icons/fa';
 import { useSearchParams } from 'next/navigation';
-
-import ReportSkeleton from './PoolSkeleton';
+import Loading from './Loading';
 
 export default function PoolClustersPage() {
    const searchParams = useSearchParams();
@@ -120,7 +119,7 @@ export default function PoolClustersPage() {
    }
 
    if (loading) {
-      return <ReportSkeleton />;
+      return <Loading />;
    }
 
    if (!pool) {
@@ -139,8 +138,8 @@ export default function PoolClustersPage() {
       <main className="flex min-h-screen items-center justify-center">
          <div className="relative z-10 w-full">
             <div className="p-10">
-               <div className="text-left">
-                  <h1 className="text-5xl font-bold text-white">{pool.name}</h1>
+               <div className="text-center md:text-left">
+                  <h1 className="text-4xl sm:text-5xl  font-bold text-white">{pool.name}</h1>
 
                   <p className="mt-3 text-lg text-slate-300">
                      Manage clusters assigned to this pool.

diff --git a/frontend/app/components/Report.jsx b/frontend/app/components/Report.jsx
@@ -226,7 +226,7 @@ export default function Report() {
 
                   {/* Desktop */}
                   <div className="hidden md:block overflow-x-auto">
-                     <table className="w-full text-left">
+                     <table className="w-full text-center md:text-left">
                         <thead className="bg-slate-900/50">
                            <tr>
                               <th className="px-6 py-4 text-sm text-slate-300">Outcome</th>

diff --git a/frontend/app/components/Results.jsx b/frontend/app/components/Results.jsx
@@ -7,6 +7,7 @@ import { FaDatabase, FaUser } from 'react-icons/fa';
 import { IoIosArrowForward } from 'react-icons/io';
 import DatePicker from 'react-datepicker';
 import { FaCalendarAlt } from 'react-icons/fa';
+import Loading from './Loading';
 
 function dateToInputValue(date) {
    if (!date) return '';
@@ -194,19 +195,15 @@ export default function ResultsPage() {
    }, [clusters, selectedClusterId]);
 
    if (!clustersLoaded) {
-      return (
-         <main className="flex min-h-screen items-center justify-center text-white">
-            Loading clusters...
-         </main>
-      );
+      return <Loading />;
    }
 
    return (
       <main className="flex justify-center space-y-8">
          <div className="relative z-10 w-full ">
             <div className=" p-10">
                {/* HEADER */}
-               <div className="mb-10 text-left">
+               <div className="mb-10 text-center md:text-left">
                   <h1 className="text-4xl sm:text-5xl font-bold text-white">Report Explorer </h1>
 
                   <p className="mt-3 text-lg text-slate-300">Find reports by cluster or by week.</p>

diff --git a/frontend/app/components/Schedule.jsx b/frontend/app/components/Schedule.jsx
@@ -5,6 +5,7 @@ import { IoSwapHorizontal } from 'react-icons/io5';
 import { IoIosArrowForward, IoMdDoneAll } from 'react-icons/io';
 import { BsThreeDots } from 'react-icons/bs';
 import { IoCloseSharp } from 'react-icons/io5';
+import Loading from './Loading';
 
 function formatDateParam(date) {
    const year = date.getFullYear();
@@ -196,13 +197,7 @@ export default function Schedule() {
    }, [swapTarget]);
 
    if (loading || !schedule) {
-      return (
-         <main className="flex items-center justify-center py-10">
-            <div className="rounded-2xl bg-white/10 px-8 py-6 text-white backdrop-blur-xl">
-               Loading schedule...
-            </div>
-         </main>
-      );
+      return <Loading />;
    }
 
    return (
@@ -211,7 +206,7 @@ export default function Schedule() {
             {/* Header */}
             <div className="mb-6 grid gap-4 text-center md:grid-cols-[1fr_auto] md:items-start md:text-left">
                <div className="order-1md:col-start-1 md:row-start-1">
-                  <h1 className="text-4xl font-bold text-white">Weekly Schedule</h1>
+                  <h1 className="text-4xl sm:text-5xl font-bold text-white">Weekly Schedule</h1>
                   <p className="mt-2  text-slate-300">Week beginning {formattedWeekBeginning}</p>
                </div>
 

diff --git a/frontend/app/components/TeamsSettingsPage.jsx b/frontend/app/components/TeamsSettingsPage.jsx
@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/react';
 import { FaLayerGroup, FaUser, FaUsers } from 'react-icons/fa';
 import { IoIosSettings } from 'react-icons/io';
+import Loading from '../components/Loading';
 
 function timeInputToInt(value) {
    if (!value) return null;
@@ -154,7 +155,7 @@ export default function TeamSettingsPage() {
    if (!team) {
       return (
          <main className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-blue-900 p-6">
-            <div className="rounded-3xl border border-white/10 bg-white/10 p-10 text-center shadow-2xl backdrop-blur-xl">
+            <div className="text-center p-10">
                <h1 className="mb-4 text-4xl font-bold text-white">Team not found</h1>
 
                <p className="mb-6 text-slate-300">No team exists with ID: {teamId}</p>
@@ -375,11 +376,7 @@ export default function TeamSettingsPage() {
    };
 
    if (loadingTeams) {
-      return (
-         <main className="flex min-h-screen items-center justify-center">
-            <p className="text-white">Loading team...</p>
-         </main>
-      );
+      return <Loading />;
    }
 
    if (!team) {
@@ -394,8 +391,8 @@ export default function TeamSettingsPage() {
       <main className="flex min-h-screen items-center justify-center">
          <div className="relative z-10 w-full">
             <div className="p-10">
-               <div className="text-left">
-                  <h1 className="text-5xl font-bold text-white">{team.name}</h1>
+               <div className="text-center md:text-left">
+                  <h1 className="text-4xl sm:text-5xl font-bold text-white">{team.name}</h1>
 
                   <p className="mt-3 text-lg text-slate-300">
                      Manage users and pools assigned to this team.