Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: Flashing history modal when changing versions (#22785) 

## Problem
History modal is flashing when changing revision versions

## Context
This was introduced in https://github.com/discourse/discourse/pull/22666

We need to have a conditional loading spinner for the initial paint of the history modal as we don't have the revision yet loaded, so this can cause some odd rendering issues. At the same time we don't want to display the loading spinner each time we toggle between the revision versions, because the loading spinner replaces the revision body causing the modal sizes to be drastically different resulting in _jumping_ or _flashing_.

## Fix
Render the loading spinner only on the first paint of the modal.

https://github.com/discourse/discourse/assets/50783505/8d19275e-86a5-4132-8a1f-af4b4f5301a6
This commit is contained in:
Isaac Janzen 2023-07-26 11:08:59 -05:00 committed by GitHub
parent f2048eeb4c
commit a5b810fe18
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/components/modal/history.hbs
View File

@ -4,7 +4,7 @@
class="history-modal"
>
<:body>
<ConditionalLoadingSpinner @condition={{this.loading}}>
<ConditionalLoadingSpinner @condition={{this.initialLoad}}>
<Modal::History::Revision
@model={{this.postRevision}}
@mobileView={{this.site.mobileView}}

2
app/assets/javascripts/discourse/app/components/modal/history.js
View File

@ -29,6 +29,7 @@ export default class History extends Component {
@tracked postRevision;
@tracked viewMode = this.site?.mobileView ? "inline" : "side_by_side";
@tracked bodyDiff;
@tracked initialLoad = true;
constructor() {
super(...arguments);
@ -171,6 +172,7 @@ export default class History extends Component {
Post.loadRevision(postId, postVersion).then((result) => {
this.postRevision = result;
this.loading = false;
this.initialLoad = false;
});
}