From 87c07103e4b2bdfb92078e5522dc19f2d712a65f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 4 May 2022 10:09:33 +0100
Subject: [PATCH] Add loading spinners to threads panels

---
 res/css/views/right_panel/_ThreadPanel.scss |  4 +-
 src/components/structures/ThreadPanel.tsx   |  5 +-
 src/components/structures/ThreadView.tsx    | 78 ++++++++++++---------
 3 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss
index 9e9c59d2cbb..9947a7575f0 100644
--- a/res/css/views/right_panel/_ThreadPanel.scss
+++ b/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
diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx
index 3729cfaeaf1..a84013bb221 100644
--- a/src/components/structures/ThreadPanel.tsx
+++ b/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>
diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx
index 4b32d88c4c9..2eb4af94fcd 100644
--- a/src/components/structures/ThreadView.tsx
+++ b/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,11 +299,45 @@ export default class ThreadView extends React.Component<IProps, IState> {
 
         const threadRelation = this.threadRelation;
 
-        const messagePanelClassNames = classNames(
-            "mx_RoomView_messagePanel",
-            {
-                "mx_GroupLayout": this.state.layout === Layout.Group,
-            });
+        const messagePanelClassNames = classNames("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={{
@@ -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">
-                        <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}
-                        />
-                    </div> }
+                    <div className="mx_ThreadView_timelinePanelWrapper">
+                        { timeline }
+                    </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}