Add loading spinners to threads panels (#8490)
This commit is contained in:
Michael Telatynski
GitHub
parent
c616bd7a62
commit
fd6498a821
3 changed files with 51 additions and 36 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in a new issue