something

web/src/App.jsx

@@ -5,6 +5,8 @@ import Layout from './components/Layout';
 import JobList from './components/JobList';
 import JobSubmission from './components/JobSubmission';
 import AdminPanel from './components/AdminPanel';
+import ErrorBoundary from './components/ErrorBoundary';
+import LoadingSpinner from './components/LoadingSpinner';
 import './styles/index.css';
 
 function App() {
@@ -17,7 +19,7 @@ function App() {
   if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gray-900">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-500"></div>
+        <LoadingSpinner size="md" />
       </div>
     );
   }
@@ -26,26 +28,20 @@ function App() {
     return loginComponent;
   }
 
-  // Wrapper to check auth before changing tabs
-  const handleTabChange = async (newTab) => {
-    // Check auth before allowing navigation
-    try {
-      await refresh();
-      // If refresh succeeds, user is still authenticated
-      setActiveTab(newTab);
-    } catch (error) {
-      // Auth check failed, user will be set to null and login will show
-      console.error('Auth check failed on navigation:', error);
-    }
+  // Wrapper to change tabs - only check auth on mount, not on every navigation
+  const handleTabChange = (newTab) => {
+    setActiveTab(newTab);
   };
 
   return (
     <Layout activeTab={activeTab} onTabChange={handleTabChange}>
-      {activeTab === 'jobs' && <JobList />}
-      {activeTab === 'submit' && (
-        <JobSubmission onSuccess={() => handleTabChange('jobs')} />
-      )}
-      {activeTab === 'admin' && <AdminPanel />}
+      <ErrorBoundary>
+        {activeTab === 'jobs' && <JobList />}
+        {activeTab === 'submit' && (
+          <JobSubmission onSuccess={() => handleTabChange('jobs')} />
+        )}
+        {activeTab === 'admin' && <AdminPanel />}
+      </ErrorBoundary>
     </Layout>
   );
 }