perf: optimize web data resources

web/src/components/SettingsPage.tsx

@@ -1,6 +1,5 @@
-import { useEffect, useState } from 'react';
 import { logout, getAuth } from '../lib/auth';
-import { getUserProfile, getPointsBalance, type UserProfile, type PointsBalance } from '../lib/api';
+import { usePoints, useProfile } from '../lib/resources';
 
 interface Props {
   locale: string;
@@ -9,25 +8,11 @@ interface Props {
 }
 
 export default function SettingsPage({ locale, settings: s }: Props) {
-  const [profile, setProfile] = useState<UserProfile | null>(null);
-  const [points, setPoints] = useState<PointsBalance | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    setLoading(true);
-    Promise.all([
-      getUserProfile(),
-      getPointsBalance(),
-    ])
-      .then(([profileData, pointsData]) => {
-        setProfile(profileData);
-        setPoints(pointsData);
-      })
-      .catch(() => {
-        // ignore errors
-      })
-      .finally(() => setLoading(false));
-  }, []);
+  const profileState = useProfile();
+  const pointsState = usePoints();
+  const profile = profileState.data ?? null;
+  const points = pointsState.data ?? null;
+  const loading = profileState.loading || pointsState.loading;
 
   const handleLogout = () => {
     if (confirm(s.logoutConfirm)) {
@@ -38,8 +23,8 @@ export default function SettingsPage({ locale, settings: s }: Props) {
   };
 
   const authEmail = getAuth()?.user?.email;
-  const displayName = loading ? '' : (profile?.display_name || profile?.email?.split('@')[0] || authEmail?.split('@')[0] || '');
-  const email = loading ? '' : (profile?.email || authEmail || '');
+  const displayName = loading ? '' : (profile?.display_name || authEmail?.split('@')[0] || '');
+  const email = loading ? '' : (authEmail || '');
   const bio = profile?.bio || '';
 
   return (