mirror of
https://github.com/flarum/framework.git
synced 2025-01-28 03:35:49 +08:00
Better post loading support (#3100)
Needed for https://github.com/flarum/core/issues/3043. Some posts are loaded dynamically, and won't be immediately available. In this case, we show a loading indicator instead of displaying content. In this PR: - We redraw post content if loading state has chnaged - We show a loading indicator while loading
This commit is contained in:
parent
d0cf8db4b1
commit
f4050ff57c
|
@ -5,6 +5,7 @@ import Dropdown from '../../common/components/Dropdown';
|
||||||
import PostControls from '../utils/PostControls';
|
import PostControls from '../utils/PostControls';
|
||||||
import listItems from '../../common/helpers/listItems';
|
import listItems from '../../common/helpers/listItems';
|
||||||
import ItemList from '../../common/utils/ItemList';
|
import ItemList from '../../common/utils/ItemList';
|
||||||
|
import LoadingIndicator from '../../common/components/LoadingIndicator';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The `Post` component displays a single post. The basic post template just
|
* The `Post` component displays a single post. The basic post template just
|
||||||
|
@ -21,6 +22,9 @@ export default class Post extends Component {
|
||||||
oninit(vnode) {
|
oninit(vnode) {
|
||||||
super.oninit(vnode);
|
super.oninit(vnode);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* May be set by subclasses.
|
||||||
|
*/
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -30,6 +34,7 @@ export default class Post extends Component {
|
||||||
* @type {SubtreeRetainer}
|
* @type {SubtreeRetainer}
|
||||||
*/
|
*/
|
||||||
this.subtree = new SubtreeRetainer(
|
this.subtree = new SubtreeRetainer(
|
||||||
|
() => this.loading,
|
||||||
() => this.attrs.post.freshness,
|
() => this.attrs.post.freshness,
|
||||||
() => {
|
() => {
|
||||||
const user = this.attrs.post.user();
|
const user = this.attrs.post.user();
|
||||||
|
@ -50,7 +55,7 @@ export default class Post extends Component {
|
||||||
return (
|
return (
|
||||||
<article {...attrs}>
|
<article {...attrs}>
|
||||||
<div>
|
<div>
|
||||||
{this.content()}
|
{this.loading ? <LoadingIndicator /> : this.content()}
|
||||||
<aside className="Post-actions">
|
<aside className="Post-actions">
|
||||||
<ul>
|
<ul>
|
||||||
{listItems(this.actionItems().toArray())}
|
{listItems(this.actionItems().toArray())}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user