From f4050ff57c67d52104d6613f085e3c9b07039f17 Mon Sep 17 00:00:00 2001
From: Alexander Skvortsov <38059171+askvortsov1@users.noreply.github.com>
Date: Fri, 29 Oct 2021 13:32:30 -0400
Subject: [PATCH] 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
---
 framework/core/js/src/forum/components/Post.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/framework/core/js/src/forum/components/Post.js b/framework/core/js/src/forum/components/Post.js
index 360823953..aa3acf41d 100644
--- a/framework/core/js/src/forum/components/Post.js
+++ b/framework/core/js/src/forum/components/Post.js
@@ -5,6 +5,7 @@ import Dropdown from '../../common/components/Dropdown';
 import PostControls from '../utils/PostControls';
 import listItems from '../../common/helpers/listItems';
 import ItemList from '../../common/utils/ItemList';
+import LoadingIndicator from '../../common/components/LoadingIndicator';
 
 /**
  * The `Post` component displays a single post. The basic post template just
@@ -21,6 +22,9 @@ export default class Post extends Component {
   oninit(vnode) {
     super.oninit(vnode);
 
+    /**
+     * May be set by subclasses.
+     */
     this.loading = false;
 
     /**
@@ -30,6 +34,7 @@ export default class Post extends Component {
      * @type {SubtreeRetainer}
      */
     this.subtree = new SubtreeRetainer(
+      () => this.loading,
       () => this.attrs.post.freshness,
       () => {
         const user = this.attrs.post.user();
@@ -50,7 +55,7 @@ export default class Post extends Component {
     return (
       <article {...attrs}>
         <div>
-          {this.content()}
+          {this.loading ? <LoadingIndicator /> : this.content()}
           <aside className="Post-actions">
             <ul>
               {listItems(this.actionItems().toArray())}