Fix room join spinner in room list header (#7364)

Author: t3chguy

src/components/views/rooms/RoomListHeader.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useContext, useEffect, useState } from "react";
+import React, { ComponentProps, useContext, useEffect, useState } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 
@@ -41,7 +41,6 @@ import ErrorDialog from "../dialogs/ErrorDialog";
 import { showCommunityInviteDialog } from "../../../RoomInvite";
 import { useDispatcher } from "../../../hooks/useDispatcher";
 import InlineSpinner from "../elements/InlineSpinner";
-import TooltipButton from "../elements/TooltipButton";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
 import {
@@ -51,6 +50,7 @@ import {
     UPDATE_HOME_BEHAVIOUR,
     UPDATE_SELECTED_SPACE,
 } from "../../../stores/spaces";
+import TooltipTarget from "../elements/TooltipTarget";
 
 const contextMenuBelow = (elementRect: DOMRect) => {
     // align the context menu's icons with the icon which opened the context menu
@@ -60,7 +60,7 @@ const contextMenuBelow = (elementRect: DOMRect) => {
     return { left, top, chevronFace };
 };
 
-const PrototypeCommunityContextMenu = (props) => {
+const PrototypeCommunityContextMenu = (props: ComponentProps<typeof SpaceContextMenu>) => {
     const communityId = CommunityPrototypeStore.instance.getSelectedCommunityId();
 
     let settingsOption;
@@ -327,14 +327,13 @@ const RoomListHeader = ({ spacePanelDisabled, onVisibilityChange }: IProps) => {
         title = getMetaSpaceName(spaceKey as MetaSpace, allRoomsInHome);
     }
 
-    let pendingRoomJoinSpinner;
+    let pendingRoomJoinSpinner: JSX.Element;
     if (joiningRooms.size) {
-        pendingRoomJoinSpinner = <InlineSpinner>
-            <TooltipButton helpText={_t(
-                "Currently joining %(count)s rooms",
-                { count: joiningRooms.size },
-            )} />
-        </InlineSpinner>;
+        pendingRoomJoinSpinner = <TooltipTarget
+            label={_t("Currently joining %(count)s rooms", { count: joiningRooms.size })}
+        >
+            <InlineSpinner />
+        </TooltipTarget>;
     }
 
     let contextMenuButton: JSX.Element = <div className="mx_RoomListHeader_contextLessTitle">{ title }</div>;