Merge pull request #376 from dappforce/improvement/home

Performance Improvement for Home Page

src/components/activity/MyNotifications.tsx

@@ -10,13 +10,13 @@ const NOTIFICATION_TITLE = 'My notifications'
 
 export const MyNotifications = () => {
   const myAddress = useMyAddress()
-  const isInitializedProxy = useMyAccount(state => state.isInitializedProxy)
+  const isInitialized = useMyAccount(state => state.isInitialized)
 
   if (!myAddress) return <NotAuthorized />
 
   return (
     <PageContent meta={{ title: NOTIFICATION_TITLE }} className={styles.NotificationPage}>
-      {!isInitializedProxy ? (
+      {!isInitialized ? (
         <Loading center />
       ) : (
         <Notifications title={NOTIFICATION_TITLE} address={myAddress} />

src/components/activity/NotifCounter.tsx

@@ -34,7 +34,7 @@ function InnerNotifCounterProvider(props: React.PropsWithChildren<{}>) {
     storageKeyType: 'user',
   })
   const myAddress = useMyAddress()
-  const isInitializedProxy = useMyAccount(state => state.isInitializedProxy)
+  const isInitialized = useMyAccount(state => state.isInitialized)
 
   const [unreadCount, setUnreadCount] = useState(0)
   const [previousLastRead, setPreviousLastRead] = useState<string | null>(null)
@@ -47,15 +47,15 @@ function InnerNotifCounterProvider(props: React.PropsWithChildren<{}>) {
   }
 
   useEffect(() => {
-    if (!isInitializedProxy || !myAddress) return
+    if (!isInitialized || !myAddress) return
     ;(async () => {
       const unreadCount = await getNotificationsCount({
         address: myAddress,
         afterDate: getDataForAddress(myAddress) || undefined,
       })
       setUnreadCount(unreadCount)
     })()
-  }, [myAddress, isInitializedProxy])
+  }, [myAddress, isInitialized])
 
   return (
     <NotifCounterContext.Provider
@@ -99,12 +99,11 @@ const Bell = ({ unreadCount }: NotificationsProps) => (
 
 export const NotificationsBell = ({ unreadCount }: NotificationsProps) => {
   const myAddress = useMyAddress()
-  const isInitializedProxy = useMyAccount(state => state.isInitializedProxy)
+  const isInitialized = useMyAccount(state => state.isInitialized)
   const { getLastReadNotif } = useNotifCounterContext()
 
   if (!enableNotifications) return null
-  if (!unreadCount || unreadCount <= 0 || !isInitializedProxy)
-    return <Bell unreadCount={unreadCount} />
+  if (!unreadCount || unreadCount <= 0 || !isInitialized) return <Bell unreadCount={unreadCount} />
 
   const showWithoutCount = !getLastReadNotif(myAddress)
 

src/components/auth/MyAccountsContext.tsx

@@ -29,13 +29,14 @@ import { fetchChainsInfo } from 'src/rtk/features/chainsInfo/chainsInfoSlice'
 import { fetchProfileSpace } from 'src/rtk/features/profiles/profilesSlice'
 import { fetchEntityOfSpaceIdsByFollower } from 'src/rtk/features/spaceIds/followedSpaceIdsSlice'
 import { useMyAccount } from 'src/stores/my-account'
-import { AnyAccountId, EmailAccount } from 'src/types'
+import { AnyAccountId, DataSourceTypes, EmailAccount } from 'src/types'
 import useSubsocialEffect from '../api/useSubsocialEffect'
 import { useAccountSelector } from '../profile-selector/AccountSelector'
 import { useIsMobileWidthOrDevice } from '../responsive'
 import { reloadSpaceIdsFollowedByAccount } from '../spaces/helpers/reloadSpaceIdsFollowedByAccount'
 import { equalAddresses } from '../substrate'
 import { getSignerToken, isProxyAdded } from '../utils/OffchainSigner/ExternalStorage'
+import { getSubsocialApi } from '../utils/SubsocialConnect'
 import { desktopWalletConnect, mobileWalletConection } from './utils'
 //
 // Types
@@ -101,6 +102,7 @@ export function MyAccountsProvider(props: React.PropsWithChildren<{}>) {
   const reloadAccountIdsByFollower = useCreateReloadAccountIdsByFollower()
   const reloadSpaceIdsRelatedToAccount = useCreateReloadSpaceIdsRelatedToAccount()
   const address = useMyAddress()
+  const isInitialized = useMyAccount(state => state.isInitialized)
   const { getAllEmailAccounts } = useEmailAccount()
   const [, recheck] = useReducer(x => (x + 1) % 16384, 0)
   const isMobile = useIsMobileWidthOrDevice()
@@ -132,7 +134,7 @@ export function MyAccountsProvider(props: React.PropsWithChildren<{}>) {
   }, [status])
 
   useSubsocialEffect(
-    ({ substrate, subsocial }) => {
+    ({ substrate }) => {
       if (!address) return
 
       let unsubAccountInfo: UnsubscribeFn
@@ -141,13 +143,10 @@ export function MyAccountsProvider(props: React.PropsWithChildren<{}>) {
         const readyApi = await substrate.api
 
         Promise.all([
-          reloadSpaceIdsFollowedByAccount({ substrate, dispatch: dispatch, account: address }),
+          reloadSpaceIdsFollowedByAccount({ substrate, dispatch, account: address }),
           reloadAccountIdsByFollower(address),
           reloadSpaceIdsRelatedToAccount(address),
-          dispatch(fetchProfileSpace({ id: address, api: subsocial })),
-          dispatch(fetchEntityOfSpaceIdsByFollower({ id: address, reload: true, api: subsocial })),
           dispatch(fetchChainsInfo({})),
-          dispatch(fetchAddressLikeCounts({ address, postIds: null })),
         ])
 
         unsubAccountInfo = await readyApi.query.system.account(
@@ -166,6 +165,20 @@ export function MyAccountsProvider(props: React.PropsWithChildren<{}>) {
     },
     [address],
   )
+  useEffect(() => {
+    if (!isInitialized || !address) return
+    dispatch(
+      fetchEntityOfSpaceIdsByFollower({
+        id: address,
+        dataSource: DataSourceTypes.SQUID,
+        api: getSubsocialApi(),
+      }),
+    )
+    dispatch(
+      fetchProfileSpace({ id: address, api: getSubsocialApi(), dataSource: DataSourceTypes.SQUID }),
+    )
+    dispatch(fetchAddressLikeCounts({ address, postIds: null }))
+  }, [address, isInitialized])
 
   const state = useMemo(
     () => ({ accounts, status, emailAccounts }),

src/components/main/HomePage.tsx

@@ -7,7 +7,10 @@ import { useCallback, useEffect, useState } from 'react'
 import config from 'src/config'
 import { useSendEvent } from 'src/providers/AnalyticContext'
 import { getInitialPropsWithRedux } from 'src/rtk/app'
+import { useAppSelector } from 'src/rtk/app/store'
 import { useFetchTotalStake } from 'src/rtk/features/creators/totalStakeHooks'
+import { selectSpaceIdsByFollower } from 'src/rtk/features/spaceIds/followedSpaceIdsSlice'
+import { useMyAccount } from 'src/stores/my-account'
 import { PostKind } from 'src/types/graphql-global-types'
 import { getAmountRange } from 'src/utils/analytics'
 import { useIsSignedIn, useMyAddress } from '../auth/MyAccountsContext'
@@ -147,9 +150,20 @@ const TabsHomePage = ({
     setFiltersInUrl(router, key, filterType, { ref: refId })
   }
 
+  const isInitialized = useMyAccount(state => state.isInitialized)
+  const followedIds = useAppSelector(state => {
+    return selectSpaceIdsByFollower(state, myAddress)
+  })
+
+  const isLoadingFollowedIds = followedIds === undefined
   useEffect(() => {
-    onChangeKey(tab)
-  }, [isSignedIn])
+    if (!isInitialized || !isSignedIn || isLoadingFollowedIds) return
+    if (followedIds.length === 0) {
+      setFiltersInUrl(router, 'posts', { type: 'hot' }, { ref: refId })
+    } else {
+      onChangeKey(tab)
+    }
+  }, [followedIds, isInitialized])
 
   const handleScroll = () => {
     const currentScrollPos = window.pageYOffset

src/stores/my-account.ts

@@ -16,7 +16,14 @@ import { useAnalytics } from './analytics'
 import { create } from './utils'
 
 type State = {
+  /**
+   * `isInitialized` is `true` when the addresses (address & parentProxyAddress) are all set
+   * but there is still a case where the proxy is invalid and user will be logged out after that
+   */
   isInitialized?: boolean
+  /**
+   * `isInitializedProxy` is `true` when the initialization process is all done, including checking the proxy
+   */
   isInitializedProxy?: boolean
 
   preferredWallet: any | null
@@ -148,13 +155,14 @@ export const useMyAccount = create<State & Actions>()((set, get) => ({
         accountStorage.remove()
         accountAddressStorage.remove()
         set({ address: null })
+      } else {
+        accountAddressStorage.set(address)
       }
     }
 
-    set({ isInitialized: true })
+    set({ isInitialized: true, parentProxyAddress: parentProxyAddress || undefined })
 
     if (parentProxyAddress) {
-      set({ parentProxyAddress })
       try {
         const proxies = await getProxies(parentProxyAddress)
         const currentProxy = proxies.find(({ address }) => address === get().address)