Improve account fetching

src/screens/Tabs/Me/Root.tsx

@@ -8,8 +8,12 @@ import AccountNav from '@screens/Tabs/Shared/Account/Nav'
 import AccountContext from '@screens/Tabs/Shared/Account/utils/createContext'
 import accountInitialState from '@screens/Tabs/Shared/Account/utils/initialState'
 import accountReducer from '@screens/Tabs/Shared/Account/utils/reducer'
-import { getInstanceActive } from '@utils/slices/instancesSlice'
+import { useAccountQuery } from '@utils/queryHooks/account'
-import React, { useReducer, useRef, useState } from 'react'
+import {
+  getInstanceAccount,
+  getInstanceActive
+} from '@utils/slices/instancesSlice'
+import React, { useReducer, useRef } from 'react'
 import Animated, {
   useAnimatedScrollHandler,
   useSharedValue
@@ -18,12 +22,19 @@ import { useSelector } from 'react-redux'
 
 const ScreenMeRoot: React.FC = () => {
   const instanceActive = useSelector(getInstanceActive)
+  const instanceAccount = useSelector(
+    getInstanceAccount,
+    (prev, next) => prev?.id === next?.id
+  )
+  const { data } = useAccountQuery({
+    // @ts-ignore
+    id: instanceAccount?.id,
+    options: { enabled: instanceActive !== -1, keepPreviousData: false }
+  })
 
   const scrollRef = useRef<Animated.ScrollView>(null)
   useScrollToTop(scrollRef)
 
-  const [data, setData] = useState<Mastodon.Account>()
-
   const [accountState, accountDispatch] = useReducer(
     accountReducer,
     accountInitialState
@@ -46,7 +57,7 @@ const ScreenMeRoot: React.FC = () => {
         scrollEventThrottle={16}
       >
         {instanceActive !== -1 ? (
-          <MyInfo setData={setData} />
+          <MyInfo account={data} />
         ) : (
           <ComponentInstance />
         )}

src/screens/Tabs/Me/Root/MyInfo.tsx

@@ -1,31 +1,16 @@
 import AccountHeader from '@screens/Tabs/Shared/Account/Header'
 import AccountInformation from '@screens/Tabs/Shared/Account/Information'
-import { useAccountQuery } from '@utils/queryHooks/account'
+import React from 'react'
-import { getInstanceAccount } from '@utils/slices/instancesSlice'
-import React, { useEffect } from 'react'
-import { useSelector } from 'react-redux'
 
 export interface Props {
-  setData: React.Dispatch<React.SetStateAction<Mastodon.Account | undefined>>
+  account: Mastodon.Account | undefined
 }
 
-const MyInfo: React.FC<Props> = ({ setData }) => {
+const MyInfo: React.FC<Props> = ({ account }) => {
-  const instanceAccount = useSelector(
-    getInstanceAccount,
-    (prev, next) => prev?.id === next?.id
-  )
-  const { data } = useAccountQuery({ id: instanceAccount!.id })
-
-  useEffect(() => {
-    if (data) {
-      setData(data)
-    }
-  }, [data])
-
   return (
     <>
-      <AccountHeader account={data} limitHeight />
+      <AccountHeader account={account} limitHeight />
-      <AccountInformation account={data} myInfo />
+      <AccountInformation account={account} myInfo />
     </>
   )
 }

src/screens/Tabs/Shared/Account/Information/Account.tsx

@@ -88,7 +88,7 @@ const AccountInformationAccount: React.FC<Props> = ({ account, myInfo }) => {
   } else {
     return (
       <PlaceholderLine
-        width={StyleConstants.Font.Size.M * 2}
+        width={StyleConstants.Font.Size.M * 3}
         height={StyleConstants.Font.LineHeight.M}
         color={theme.shimmerDefault}
         noMargin

src/screens/Tabs/Shared/Account/Information/Created.tsx

@@ -48,7 +48,7 @@ const AccountInformationCreated: React.FC<Props> = ({ account }) => {
   } else {
     return (
       <PlaceholderLine
-        width={StyleConstants.Font.Size.S * 3}
+        width={StyleConstants.Font.Size.S * 4}
         height={StyleConstants.Font.LineHeight.S}
         color={theme.shimmerDefault}
         noMargin

src/screens/Tabs/Shared/Account/Information/Name.tsx

@@ -36,31 +36,31 @@ const AccountInformationName: React.FC<Props> = ({ account }) => {
     }
   }, [account?.moved])
 
-  if (account) {
+  return (
-    return (
+    <View style={[styles.base, { flexDirection: 'row' }]}>
-      <View style={[styles.base, { flexDirection: 'row' }]}>
+      {account ? (
-        <Text style={movedStyle.base}>
+        <>
-          <ParseEmojis
+          <Text style={movedStyle.base}>
-            content={account.display_name || account.username}
+            <ParseEmojis
-            emojis={account.emojis}
+              content={account.display_name || account.username}
-            size='L'
+              emojis={account.emojis}
-            fontBold
+              size='L'
-          />
+              fontBold
-        </Text>
+            />
-        {movedContent}
+          </Text>
-      </View>
+          {movedContent}
-    )
+        </>
-  } else {
+      ) : (
-    return (
+        <PlaceholderLine
-      <PlaceholderLine
+          width={StyleConstants.Font.Size.L * 2}
-        width={StyleConstants.Font.Size.L * 2}
+          height={StyleConstants.Font.LineHeight.L}
-        height={StyleConstants.Font.LineHeight.L}
+          color={theme.shimmerDefault}
-        color={theme.shimmerDefault}
+          noMargin
-        noMargin
+          style={{ borderRadius: 0 }}
-        style={styles.base}
+        />
-      />
+      )}
-    )
+    </View>
-  }
+  )
 }
 
 const styles = StyleSheet.create({