Wrap UserOnboardingButton to avoid unnecessary work when it's not shown

Author: justjanne

src/components/structures/LeftPanel.tsx

@@ -46,7 +46,7 @@ import { UIComponent } from "../../settings/UIFeature";
 import { ButtonEvent } from "../views/elements/AccessibleButton";
 import PosthogTrackers from "../../PosthogTrackers";
 import PageType from "../../PageTypes";
-import { UserOnboardingButton } from "../views/user-onboarding/UserOnboardingButton";
+import UserOnboardingButton from "../views/user-onboarding/UserOnboardingButton";
 
 interface IProps {
     isMinimized: boolean;

src/components/views/user-onboarding/UserOnboardingButton.tsx

@@ -41,19 +41,20 @@ interface Props {
     minimized: boolean;
 }
 
-export function UserOnboardingButton({ selected, minimized }: Props) {
-    const context = useUserOnboardingContext();
-    const [completedTasks, waitingTasks] = useUserOnboardingTasks(context);
-
-    const completed = completedTasks.length;
-    const waiting = waitingTasks.length;
-    const total = completed + waiting;
+export default function ConditionalUserOnboardingButton({ selected, minimized }: Props) {
+    const useCase = useSettingValue<UseCase | null>("FTUE.useCaseSelection");
+    const visible = useSettingValue<boolean>("FTUE.userOnboardingButton");
 
-    let progress = 1;
-    if (context && waiting) {
-        progress = completed / total;
+    if (!visible || minimized || !showUserOnboardingPage(useCase)) {
+        return null;
     }
 
+    return (
+        <UserOnboardingButton selected={selected} minimized={minimized} />
+    );
+}
+
+function UserOnboardingButton({ selected, minimized }: Props) {
     const onDismiss = useCallback((ev: ButtonEvent) => {
         PosthogTrackers.trackInteraction("WebRoomListUserOnboardingIgnoreButton", ev);
         SettingsStore.setValue("FTUE.userOnboardingButton", null, SettingLevel.ACCOUNT, false);
@@ -64,12 +65,6 @@ export function UserOnboardingButton({ selected, minimized }: Props) {
         defaultDispatcher.fire(Action.ViewHomePage);
     }, []);
 
-    const useCase = useSettingValue<UseCase | null>("FTUE.useCaseSelection");
-    const visible = useSettingValue<boolean>("FTUE.userOnboardingButton");
-    if (!visible || minimized || !showUserOnboardingPage(useCase)) {
-        return null;
-    }
-
     return (
         <AccessibleButton
             className={classNames("mx_UserOnboardingButton", {