feat: improve loading state handling in LayoutWrapper and adjust ProfilePage layout

src/app/[handle]/page.tsx

@@ -381,14 +381,14 @@ export default function ProfilePage() {
                     <div style={{
                         display: 'flex',
                         justifyContent: 'space-between',
-                        alignItems: 'flex-end',
+                        alignItems: 'flex-start',
-                        marginTop: '-48px',
                     }}>
                         <div className="avatar avatar-lg" style={{
                             width: '96px',
                             height: '96px',
                             fontSize: '36px',
                             border: '4px solid var(--background)',
+                            marginTop: '-48px',
                         }}>
                             {user.avatarUrl ? (
                                 <img src={user.avatarUrl} alt={user.displayName || user.handle} />
@@ -397,21 +397,22 @@ export default function ProfilePage() {
                             )}
                         </div>
 
-                        {!isOwnProfile && currentUser && (
+                        <div style={{ paddingTop: '12px' }}>
-                            <button
+                            {!isOwnProfile && currentUser && (
-                                className={`btn ${isFollowing ? '' : 'btn-primary'}`}
+                                <button
-                                onClick={handleFollow}
+                                    className={`btn ${isFollowing ? '' : 'btn-primary'}`}
-                                style={{ marginBottom: '12px' }}
+                                    onClick={handleFollow}
-                            >
+                                >
-                                {isFollowing ? 'Following' : 'Follow'}
+                                    {isFollowing ? 'Following' : 'Follow'}
-                            </button>
+                                </button>
-                        )}
+                            )}
 
-                        {isOwnProfile && (
+                            {isOwnProfile && (
-                            <button className="btn" style={{ marginBottom: '12px' }} onClick={() => setIsEditing(!isEditing)}>
+                                <button className="btn" onClick={() => setIsEditing(!isEditing)}>
-                                {isEditing ? 'Close' : 'Edit Profile'}
+                                    {isEditing ? 'Close' : 'Edit Profile'}
-                            </button>
+                                </button>
-                        )}
+                            )}
+                        </div>
                     </div>
 
                     {/* User Info */}

src/app/globals.css

@@ -227,12 +227,14 @@ a.btn-primary:visited {
   position: sticky;
   top: 0;
   height: 100vh;
+  overflow-y: auto;
 }
 
 .main {
   flex: 1;
   max-width: 600px;
   min-width: 0;
+  min-height: 100vh;
   border-right: 1px solid var(--border);
 }
 
@@ -240,9 +242,11 @@ a.btn-primary:visited {
   width: 320px;
   flex-shrink: 0;
   padding: 16px;
+  padding-bottom: 32px;
   position: sticky;
   top: 0;
   height: 100vh;
+  overflow-y: auto;
 }
 
 /* Post */

src/components/LayoutWrapper.tsx

@@ -4,9 +4,10 @@ import { useEffect } from 'react';
 import { usePathname } from 'next/navigation';
 import { Sidebar } from './Sidebar';
 import { RightSidebar } from './RightSidebar';
+import { useAuth } from '@/lib/contexts/AuthContext';
 
 export function LayoutWrapper({ children }: { children: React.ReactNode }) {
-    const pathname = usePathname();
+    const { loading } = useAuth();
 
     // Paths that should NOT have the app layout
     const isStandalone =
@@ -46,6 +47,33 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
             .catch(() => { });
     }, []);
 
+    if (loading) {
+        return (
+            <div style={{
+                height: '100vh',
+                width: '100vw',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: 'var(--background)'
+            }}>
+                <div style={{
+                    width: '24px',
+                    height: '24px',
+                    borderRadius: '50%',
+                    border: '2px solid var(--border)',
+                    borderTopColor: 'var(--accent)',
+                    animation: 'spin 0.8s linear infinite'
+                }} />
+                <style jsx>{`
+                    @keyframes spin {
+                        to { transform: rotate(360deg); }
+                    }
+                `}</style>
+            </div>
+        );
+    }
+
     if (isStandalone) {
         return <>{children}</>;
     }