diff --git a/framework/core/js/forum/src/components/DiscussionList.js b/framework/core/js/forum/src/components/DiscussionList.js
index bbb52e0e0..e645185be 100644
--- a/framework/core/js/forum/src/components/DiscussionList.js
+++ b/framework/core/js/forum/src/components/DiscussionList.js
@@ -2,6 +2,7 @@ import Component from 'flarum/Component';
import DiscussionListItem from 'flarum/components/DiscussionListItem';
import Button from 'flarum/components/Button';
import LoadingIndicator from 'flarum/components/LoadingIndicator';
+import Placeholder from 'flarum/components/Placeholder';
/**
* The `DiscussionList` component displays a list of discussions.
@@ -53,6 +54,15 @@ export default class DiscussionList extends Component {
});
}
+ if (this.discussions.length == 0) {
+ const text = 'Looks like there are no discussions here. Why don\'t you create a new one?';
+ return (
+
+ {Placeholder.component({text})}
+
+ );
+ }
+
return (
diff --git a/framework/core/js/lib/components/Placeholder.js b/framework/core/js/lib/components/Placeholder.js
new file mode 100644
index 000000000..889b9cbc3
--- /dev/null
+++ b/framework/core/js/lib/components/Placeholder.js
@@ -0,0 +1,19 @@
+import Component from 'flarum/Component';
+
+/**
+ * The `Placeholder` component displays a muted text with some call to action,
+ * usually used as an empty state.
+ *
+ * ### Props
+ *
+ * - `text`
+ */
+export default class Placeholder extends Component {
+ view() {
+ return (
+
+ );
+ }
+}
diff --git a/framework/core/less/lib/Placeholder.less b/framework/core/less/lib/Placeholder.less
new file mode 100644
index 000000000..be0f13e5a
--- /dev/null
+++ b/framework/core/less/lib/Placeholder.less
@@ -0,0 +1,9 @@
+.Placeholder {
+ margin-top: 40px;
+
+ p {
+ font-size: 1.4em;
+ color: @muted-more-color;
+ text-align: center;
+ }
+}
diff --git a/framework/core/less/lib/lib.less b/framework/core/less/lib/lib.less
index 16af34d65..b942aa28d 100755
--- a/framework/core/less/lib/lib.less
+++ b/framework/core/less/lib/lib.less
@@ -22,6 +22,7 @@
@import "LoadingIndicator.less";
@import "Modal.less";
@import "Navigation.less";
+@import "Placeholder.less";
@import "Search.less";
@import "Select.less";
@import "Tooltip.less";