Fix

web/components/buttons/more-options-user-button.tsx

@@ -104,7 +104,7 @@ export function MoreOptionsUserButton(props: { user: User }) {
                       title: 'Delete Account',
                       content: (
                         <div className="flex min-h-[200px] items-center justify-center p-4">
-                          <DeleteYourselfButton username={user.username} />
+                          <DeleteYourselfButton/>
                         </div>
                       ),
                     },

web/components/notifications.tsx

@@ -9,11 +9,19 @@ import {debounce} from "lodash";
 import {api} from "web/lib/api";
 import {MultiSelectAnswers} from "web/components/answers/answer-compatibility-question-content";
 import {usePrivateUser} from "web/hooks/use-user";
+import {PrivateUser} from "common/user";
+import {CompassLoadingIndicator} from "web/components/widgets/loading-indicator";
 
 export const NotificationSettings = () => {
   const privateUser = usePrivateUser()
-  if (!privateUser) return null
+  if (!privateUser) return <CompassLoadingIndicator/>
+  return <LoadedNotificationSettings privateUser={privateUser}/>
+}
 
+function LoadedNotificationSettings(props: {
+  privateUser: PrivateUser,
+}) {
+  const {privateUser} = props
   const [prefs, setPrefs] =
     usePersistentInMemoryState<notification_preferences>(
       privateUser.notificationPreferences,

web/components/profile/delete-yourself.tsx

@@ -8,9 +8,7 @@ import {Input} from '../widgets/input'
 import {Title} from '../widgets/title'
 import {deleteAccount} from "web/lib/util/delete";
 
-export function DeleteYourselfButton(props: { username: string }) {
-  const {username} = props
-
+export function DeleteYourselfButton() {
   const [deleteAccountConfirmation, setDeleteAccountConfirmation] = useState('')
 
   return (
@@ -29,7 +27,7 @@ export function DeleteYourselfButton(props: { username: string }) {
       onSubmitWithSuccess={async () => {
         if (deleteAccountConfirmation == 'delete my account') {
           toast
-            .promise(deleteAccount(username), {
+            .promise(deleteAccount(), {
               loading: 'Deleting account...',
               success: () => {
                 router.push('/')

web/pages/settings.tsx

@@ -9,22 +9,21 @@ import toast from "react-hot-toast";
 import {deleteAccount} from "web/lib/util/delete";
 import router from "next/router";
 import {Button} from "web/components/buttons/button";
-import {getAuth, sendEmailVerification, sendPasswordResetEmail, User} from 'firebase/auth';
+import {getAuth, sendEmailVerification, sendPasswordResetEmail} from 'firebase/auth';
 import {auth} from "web/lib/firebase/users";
 import {NotificationSettings} from "web/components/notifications";
 import ThemeIcon from "web/components/theme-icon";
+import {CompassLoadingIndicator} from "web/components/widgets/loading-indicator";
 
 export default function NotificationsPage() {
   useRedirectIfSignedOut()
-  const privateUser = usePrivateUser()
-  const user = auth.currentUser
   return (
     <PageBase trackPageView={'settings page'} className={'mx-4'}>
       <NoSEO/>
       <Title>Settings</Title>
       <UncontrolledTabs
         tabs={[
-          {title: 'General', content: <GeneralSettings privateUser={privateUser} user={user}/>},
+          {title: 'General', content: <GeneralSettings/>},
           {title: 'Notifications', content: <NotificationSettings/>},
         ]}
         trackingName={'settings page'}
@@ -33,12 +32,18 @@ export default function NotificationsPage() {
   )
 }
 
-const GeneralSettings = (props: {
-  privateUser: PrivateUser | null | undefined,
-  user: User | null,
+export const GeneralSettings = () => {
+  const privateUser = usePrivateUser()
+  if (!privateUser) return <CompassLoadingIndicator/>
+  return <LoadedGeneralSettings privateUser={privateUser}/>
+}
+
+const LoadedGeneralSettings = (props: {
+  privateUser: PrivateUser,
 }) => {
-  const {privateUser, user} = props
-  if (!privateUser || !user) return null
+  const {privateUser} = props
+  const user = auth.currentUser
+  if (!user) return null
 
   const handleDeleteAccount = async () => {
     const confirmed = confirm(