Fix header avatar stuck in pending mode when all channels are deleted (#911)

## Issue
535

## Change
- Header: Use the "channel list undefined" instead of "active channel url undefined" to determine if the button should be "pending".
- App: restore the use of `activeChannelClaim` instead of `activeChannelId`. In the existing design, the latter is never cleared is some situations, so the former is more accurate as it takes the current channel list into account. We might want to hide (not export) `activeChannelId` to avoid this mis-use again.

ui/component/app/index.js

@@ -12,7 +12,7 @@ import {
   selectIsUpgradeAvailable,
   selectAutoUpdateDownloaded,
   selectModal,
-  selectActiveChannelId,
+  selectActiveChannelClaim,
   selectIsReloadRequired,
 } from 'redux/selectors/app';
 import { selectUploadCount } from 'redux/selectors/publish';
@@ -37,7 +37,7 @@ const select = (state) => ({
   isAuthenticated: selectUserVerifiedEmail(state),
   currentModal: selectModal(state),
   syncFatalError: selectSyncFatalError(state),
-  activeChannelId: selectActiveChannelId(state),
+  activeChannelClaim: selectActiveChannelClaim(state),
   myChannelClaimIds: selectMyChannelClaimIds(state),
   subscriptions: selectSubscriptions(state),
 });

ui/component/app/view.jsx

@@ -79,7 +79,7 @@ type Props = {
   syncLoop: (?boolean) => void,
   currentModal: any,
   syncFatalError: boolean,
-  activeChannelId: ?string,
+  activeChannelClaim: ?ChannelClaim,
   myChannelClaimIds: ?Array<string>,
   subscriptions: Array<Subscription>,
   setActiveChannelIfNotSet: () => void,
@@ -114,7 +114,7 @@ function App(props: Props) {
     currentModal,
     syncFatalError,
     myChannelClaimIds,
-    activeChannelId,
+    activeChannelClaim,
     setActiveChannelIfNotSet,
     setIncognito,
     fetchModBlockedList,
@@ -154,7 +154,7 @@ function App(props: Props) {
   const hasMyChannels = myChannelClaimIds && myChannelClaimIds.length > 0;
   const hasNoChannels = myChannelClaimIds && myChannelClaimIds.length === 0;
   const shouldMigrateLanguage = LANGUAGE_MIGRATIONS[language];
-  const hasActiveChannelClaim = activeChannelId !== undefined;
+  const hasActiveChannelClaim = activeChannelClaim !== undefined;
   const isPersonalized = !IS_WEB || hasVerifiedEmail;
   const renderFiledrop = !isMobile && isAuthenticated;
   const connectionStatus = useConnectionStatus();

ui/component/headerProfileMenuButton/index.js

@@ -1,10 +1,12 @@
 import { connect } from 'react-redux';
 import { doSignOut } from 'redux/actions/app';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
+import { selectMyChannelClaimIds } from 'redux/selectors/claims';
 import { selectUserEmail, selectUserVerifiedEmail } from 'redux/selectors/user';
 import HeaderProfileMenuButton from './view';
 
 const select = (state) => ({
+  myChannelClaimIds: selectMyChannelClaimIds(state),
   activeChannelClaim: selectActiveChannelClaim(state),
   authenticated: selectUserVerifiedEmail(state),
   email: selectUserEmail(state),

ui/component/headerProfileMenuButton/view.jsx

@@ -12,6 +12,7 @@ import React from 'react';
 import Skeleton from '@mui/material/Skeleton';
 
 type HeaderMenuButtonProps = {
+  myChannelClaimIds: ?Array<string>,
   activeChannelClaim: ?ChannelClaim,
   authenticated: boolean,
   email: ?string,
@@ -19,14 +20,14 @@ type HeaderMenuButtonProps = {
 };
 
 export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
-  const { activeChannelClaim, authenticated, email, signOut } = props;
-
+  const { myChannelClaimIds, activeChannelClaim, authenticated, email, signOut } = props;
+  const pendingChannelFetch = myChannelClaimIds === undefined;
   const activeChannelUrl = activeChannelClaim && activeChannelClaim.permanent_url;
 
   return (
     <div className="header__buttons">
       <Menu>
-        {activeChannelUrl === undefined ? (
+        {pendingChannelFetch ? (
           <Skeleton variant="circular" animation="wave" className="header__navigationItem--iconSkeleton" />
         ) : (
           <MenuButton