fix(ui): improve authentication UX and refine skin viewer components

- Add loading states to `ProfilePage` and `Navbar` to prevent flickering during authentication checks
- Implement animation pause/resume functionality in `SkinDetailModal` and `SkinViewer`
- Simplify `PageTransition` component by removing unnecessary complexity and state
- Refactor `SkinDetailModal` to use a more robust state management for animations
- Adjust `CharacterCard` skin dimensions for better layout consistency
- Clean up unused imports and redundant animation variants in several components

src/components/Navbar.tsx

@@ -15,7 +15,7 @@ export default function Navbar() {
   const [navbarHeight, setNavbarHeight] = useState(0);
   const [scrollProgress, setScrollProgress] = useState(0);
   const navbarRef = useRef<HTMLElement>(null);
-  const { user, isAuthenticated, logout } = useAuth();
+  const { user, isAuthenticated, isLoading: isAuthLoading, logout } = useAuth();
   const router = useRouter();
   const pathname = usePathname();
   const { scrollY } = useScroll();
@@ -213,7 +213,12 @@ export default function Navbar() {
               ))}
               
               {/* 用户头像框 - 增强的微交互 */}
-              {isAuthenticated ? (
+              {isAuthLoading ? (
+                <div className="flex items-center space-x-3">
+                  <div className="w-9 h-9 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse" />
+                  <div className="w-12 h-4 rounded bg-gray-200 dark:bg-gray-700 animate-pulse" />
+                </div>
+              ) : isAuthenticated ? (
                 <div className="flex items-center space-x-4">
                   <motion.div 
                     whileHover={{ scale: 1.05 }}