Don't keep spinning if joining space child failed

src/components/structures/SpaceHierarchy.tsx

@@ -68,7 +68,6 @@ interface IProps {
     initialText?: string;
     additionalButtons?: ReactNode;
     showRoom(cli: MatrixClient, hierarchy: RoomHierarchy, roomId: string, roomType?: RoomType): void;
-    joinRoom(cli: MatrixClient, hierarchy: RoomHierarchy, roomId: string): void;
 }
 
 interface ITileProps {
@@ -78,7 +77,7 @@ interface ITileProps {
     numChildRooms?: number;
     hasPermissions?: boolean;
     onViewRoomClick(): void;
-    onJoinRoomClick(): void;
+    onJoinRoomClick(): Promise<unknown>;
     onToggleClick?(): void;
 }
 
@@ -115,9 +114,9 @@ const Tile: React.FC<ITileProps> = ({
         setBusy(true);
         ev.preventDefault();
         ev.stopPropagation();
-        onJoinRoomClick();
-        setJoinedRoom(await awaitRoomDownSync(cli, room.room_id));
-        setBusy(false);
+        onJoinRoomClick().then(() => awaitRoomDownSync(cli, room.room_id)).then(setJoinedRoom).finally(() => {
+            setBusy(false);
+        });
     };
 
     let button;
@@ -141,7 +140,7 @@ const Tile: React.FC<ITileProps> = ({
         >
             { _t("View") }
         </AccessibleButton>;
-    } else if (onJoinClick) {
+    } else {
         button = <AccessibleButton
             onClick={onJoinClick}
             kind="primary"
@@ -343,19 +342,23 @@ export const showRoom = (cli: MatrixClient, hierarchy: RoomHierarchy, roomId: st
     });
 };
 
-export const joinRoom = (cli: MatrixClient, hierarchy: RoomHierarchy, roomId: string): void => {
+export const joinRoom = (cli: MatrixClient, hierarchy: RoomHierarchy, roomId: string): Promise<unknown> => {
     // Don't let the user view a room they won't be able to either peek or join:
     // fail earlier so they don't have to click back to the directory.
     if (cli.isGuest()) {
         dis.dispatch({ action: "require_registration" });
         return;
     }
 
-    cli.joinRoom(roomId, {
+    const prom = cli.joinRoom(roomId, {
         viaServers: Array.from(hierarchy.viaMap.get(roomId) || []),
-    }).catch(err => {
+    });
+
+    prom.catch(err => {
         RoomViewStore.showJoinRoomError(err, roomId);
     });
+
+    return prom;
 };
 
 interface IHierarchyLevelProps {
@@ -365,7 +368,7 @@ interface IHierarchyLevelProps {
     parents: Set<string>;
     selectedMap?: Map<string, Set<string>>;
     onViewRoomClick(roomId: string, roomType?: RoomType): void;
-    onJoinRoomClick(roomId: string): void;
+    onJoinRoomClick(roomId: string): Promise<unknown>;
     onToggleClick?(parentId: string, childId: string): void;
 }
 

src/components/structures/SpaceRoomView.tsx

@@ -55,7 +55,7 @@ import {
     showSpaceInvite,
     showSpaceSettings,
 } from "../../utils/space";
-import SpaceHierarchy, { joinRoom, showRoom } from "./SpaceHierarchy";
+import SpaceHierarchy, { showRoom } from "./SpaceHierarchy";
 import MemberAvatar from "../views/avatars/MemberAvatar";
 import SpaceStore from "../../stores/spaces/SpaceStore";
 import FacePile from "../views/elements/FacePile";
@@ -508,7 +508,7 @@ const SpaceLanding = ({ space }: { space: Room }) => {
             ) }
         </RoomTopic>
 
-        <SpaceHierarchy space={space} showRoom={showRoom} joinRoom={joinRoom} additionalButtons={addRoomButton} />
+        <SpaceHierarchy space={space} showRoom={showRoom} additionalButtons={addRoomButton} />
     </div>;
 };