Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Add loading spinners to threads panels #8490

Merged
merged 2 commits into from
May 4, 2022
+51 −36
Merged

Add loading spinners to threads panels #8490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
87c0710
Add loading spinners to threads panels
t3chguy May 4, 2022
f16b5f3
Merge branch 'develop' into t3chguy/fix/21335
t3chguy May 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion res/css/views/right_panel/_ThreadPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 4 additions & 1 deletion src/components/structures/ThreadPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down
78 changes: 44 additions & 34 deletions src/components/structures/ThreadView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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={{
Expand All @@ -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}
Expand Down