Add loading spinners to threads panels (#8490)

res/css/views/right_panel/_ThreadPanel.scss

@@ -104,11 +104,13 @@ limitations under the License.
         }
     }
 
-    .mx_AutoHideScrollbar {
+    .mx_AutoHideScrollbar,
+    .mx_RoomView_messagePanelSpinner {
         background-color: $background;
         border-radius: 8px;
         padding-inline-end: 0;
         overflow-y: scroll; // set gap between the thread tile and the right border
+        height: 100%;
     }
 
     // Override _GroupLayout.scss for the thread panel

src/components/structures/ThreadPanel.tsx

@@ -39,6 +39,7 @@ import BetaFeedbackDialog from '../views/dialogs/BetaFeedbackDialog';
 import { Action } from '../../dispatcher/actions';
 import { UserTab } from '../views/dialogs/UserTab';
 import dis from '../../dispatcher/dispatcher';
+import Spinner from "../views/elements/Spinner";
 
 interface IProps {
     roomId: string;
@@ -301,7 +302,9 @@ const ThreadPanel: React.FC<IProps> = ({
                         permalinkCreator={permalinkCreator}
                         disableGrouping={true}
                     />
-                    : <div className="mx_AutoHideScrollbar" />
+                    : <div className="mx_AutoHideScrollbar">
+                        <Spinner />
+                    </div>
                 }
             </BaseCard>
         </RoomContext.Provider>

src/components/structures/ThreadView.tsx

@@ -51,6 +51,7 @@ import Measured from '../views/elements/Measured';
 import PosthogTrackers from "../../PosthogTrackers";
 import { ButtonEvent } from "../views/elements/AccessibleButton";
 import { RoomViewStore } from '../../stores/RoomViewStore';
+import Spinner from "../views/elements/Spinner";
 
 interface IProps {
     room: Room;
@@ -298,12 +299,46 @@ export default class ThreadView extends React.Component<IProps, IState> {
 
         const threadRelation = this.threadRelation;
 
-        const messagePanelClassNames = classNames(
+        const messagePanelClassNames = classNames("mx_RoomView_messagePanel", {
-            "mx_RoomView_messagePanel",
-            {
             "mx_GroupLayout": this.state.layout === Layout.Group,
         });
 
+        let timeline: JSX.Element;
+        if (this.state.thread) {
+            timeline = <>
+                <FileDropTarget parent={this.card.current} onFileDrop={this.onFileDrop} />
+                <TimelinePanel
+                    key={this.state.thread.id}
+                    ref={this.timelinePanel}
+                    showReadReceipts={false} // Hide the read receipts
+                    // until homeservers speak threads language
+                    manageReadReceipts={true}
+                    manageReadMarkers={true}
+                    sendReadReceiptOnLoad={true}
+                    timelineSet={this.state.thread.timelineSet}
+                    showUrlPreview={this.context.showUrlPreview}
+                    // ThreadView doesn't support IRC layout at this time
+                    layout={this.state.layout === Layout.Bubble ? Layout.Bubble : Layout.Group}
+                    hideThreadedMessages={false}
+                    hidden={false}
+                    showReactions={true}
+                    className={messagePanelClassNames}
+                    permalinkCreator={this.props.permalinkCreator}
+                    membersLoaded={true}
+                    editState={this.state.editState}
+                    eventId={this.props.initialEvent?.getId()}
+                    highlightedEventId={highlightedEventId}
+                    eventScrollIntoView={this.props.initialEventScrollIntoView}
+                    onEventScrolledIntoView={this.resetJumpToEvent}
+                    onPaginationRequest={this.onPaginationRequest}
+                />
+            </>;
+        } else {
+            timeline = <div className="mx_RoomView_messagePanelSpinner">
+                <Spinner />
+            </div>;
+        }
+
         return (
             <RoomContext.Provider value={{
                 ...this.context,
@@ -327,40 +362,15 @@ export default class ThreadView extends React.Component<IProps, IState> {
                         sensor={this.card.current}
                         onMeasurement={this.onMeasurement}
                     />
-                    { this.state.thread && <div className="mx_ThreadView_timelinePanelWrapper">
+                    <div className="mx_ThreadView_timelinePanelWrapper">
-                        <FileDropTarget parent={this.card.current} onFileDrop={this.onFileDrop} />
+                        { timeline }
-                        <TimelinePanel
+                    </div>
-                            key={this.state?.thread?.id}
-                            ref={this.timelinePanel}
-                            showReadReceipts={false} // Hide the read receipts
-                            // until homeservers speak threads language
-                            manageReadReceipts={true}
-                            manageReadMarkers={true}
-                            sendReadReceiptOnLoad={true}
-                            timelineSet={this.state?.thread?.timelineSet}
-                            showUrlPreview={this.context.showUrlPreview}
-                            // ThreadView doesn't support IRC layout at this time
-                            layout={this.state.layout === Layout.Bubble ? Layout.Bubble : Layout.Group}
-                            hideThreadedMessages={false}
-                            hidden={false}
-                            showReactions={true}
-                            className={messagePanelClassNames}
-                            permalinkCreator={this.props.permalinkCreator}
-                            membersLoaded={true}
-                            editState={this.state.editState}
-                            eventId={this.props.initialEvent?.getId()}
-                            highlightedEventId={highlightedEventId}
-                            eventScrollIntoView={this.props.initialEventScrollIntoView}
-                            onEventScrolledIntoView={this.resetJumpToEvent}
-                            onPaginationRequest={this.onPaginationRequest}
-                        />
-                    </div> }
 
                     { ContentMessages.sharedInstance().getCurrentUploads(threadRelation).length > 0 && (
                         <UploadBar room={this.props.room} relation={threadRelation} />
                     ) }
 
-                    { this.state?.thread?.timelineSet && (<MessageComposer
+                    { this.state.thread?.timelineSet && (<MessageComposer
                         room={this.props.room}
                         resizeNotifier={this.props.resizeNotifier}
                         relation={threadRelation}