nicolium: maybe even more perf improvement?

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/nicolium/src/features/ui/components/profile-dropdown.tsx

@@ -6,9 +6,13 @@ import { defineMessages, useIntl } from 'react-intl';
 import { logOut, switchAccount } from '@/actions/auth';
 import Account from '@/components/accounts/account';
 import DropdownMenu from '@/components/dropdown-menu';
+import PlaceholderAccount from '@/features/placeholder/components/placeholder-account';
 import { useAppDispatch } from '@/hooks/use-app-dispatch';
 import { useFeatures } from '@/hooks/use-features';
-import { useLoggedInAccounts } from '@/queries/accounts/use-logged-in-accounts';
+import {
+  useLoggedInAccount,
+  useLoggedInAccountIds,
+} from '@/queries/accounts/use-logged-in-accounts';
 
 import ThemeToggle from './theme-toggle';
 
@@ -20,6 +24,20 @@ const messages = defineMessages({
   logout: { id: 'profile_dropdown.logout', defaultMessage: 'Log out @{acct}' },
 });
 
+interface ILoggedInAccount {
+  accountId: string;
+}
+
+const LoggedInAccount: React.FC<ILoggedInAccount> = ({ accountId }) => {
+  const { data: account } = useLoggedInAccount(accountId);
+
+  if (!account) return <PlaceholderAccount />;
+
+  return (
+    <Account account={account} showAccountHoverCard={false} withLinkToProfile={false} hideActions />
+  );
+};
+
 interface IProfileDropdown {
   account: AccountEntity;
   children: React.ReactNode;
@@ -38,14 +56,14 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
   const features = useFeatures();
   const intl = useIntl();
 
-  const { accounts: otherAccounts } = useLoggedInAccounts();
+  const otherAccountIds = useLoggedInAccountIds();
 
   const handleLogOut = () => {
     dispatch(logOut());
   };
 
-  const handleSwitchAccount = (otherAccount: AccountEntity) => () => {
+  const handleSwitchAccount = (otherAccountId: string) => () => {
-    dispatch(switchAccount(otherAccount.id));
+    dispatch(switchAccount(otherAccountId));
   };
 
   const renderAccount = (account: AccountEntity) => (
@@ -60,13 +78,11 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
       linkOptions: { to: '/@{$username}', params: { username: account.acct } },
     });
 
-    otherAccounts.forEach((otherAccount?: AccountEntity) => {
+    otherAccountIds.forEach((otherAccountId) => {
-      if (otherAccount && otherAccount.id !== account.id) {
+      menu.push({
-        menu.push({
+        text: <LoggedInAccount accountId={otherAccountId} />,
-          text: renderAccount(otherAccount),
+        action: handleSwitchAccount(otherAccountId),
-          action: handleSwitchAccount(otherAccount),
+      });
-        });
-      }
     });
 
     menu.push({ text: null });
@@ -93,7 +109,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
         ))}
       </>
     );
-  }, [account, otherAccounts.length, features]);
+  }, [account, otherAccountIds.length, features]);
 
   return (
     <DropdownMenu component={ProfileDropdownMenu}>

packages/nicolium/src/queries/accounts/use-logged-in-accounts.ts

@@ -1,5 +1,4 @@
 import { skipToken, useQueries, useQuery } from '@tanstack/react-query';
-import { useMemo } from 'react';
 import { createSelector } from 'reselect';
 
 import { useAppSelector } from '@/hooks/use-app-selector';
@@ -19,7 +18,7 @@ const selectOtherAccountIds = createSelector(
 );
 
 const useLoggedInAccount = (accountId: string) => {
-  const query = useQuery({
+  const query = useQuery<Account>({
     queryKey: queryKeys.accounts.show(accountId),
     queryFn: skipToken,
   });
@@ -27,24 +26,22 @@ const useLoggedInAccount = (accountId: string) => {
   return query;
 };
 
-const useLoggedInAccountIds = () => useAppSelector((state) => selectOtherAccountIds(state));
+const useLoggedInAccountIds = () => useAppSelector(selectOtherAccountIds);
 
 /** doesn't fetch because it's a hack that should not exist like this */
 const useLoggedInAccounts = () => {
   const otherAccountIds = useLoggedInAccountIds();
 
-  const queries = useQueries({
+  const { accounts } = useQueries({
     queries: otherAccountIds.map((accountId) => ({
       queryKey: queryKeys.accounts.show(accountId),
       queryFn: skipToken,
     })),
+    combine: (results) => ({
+      accounts: results.map((q) => q.data).filter((account): account is Account => !!account),
+    }),
   });
 
-  const accounts = useMemo(
-    () => queries.map((q) => q.data).filter((account): account is Account => !!account),
-    [queries],
-  );
-
   return { accounts };
 };