1 files changed, 18 insertions, 4 deletions
diff --git a/vnext/src/components/Discover.js b/vnext/src/components/Discover.js
index 63a0cad0d..daf2902f4 100644
--- a/vnext/src/components/Discover.js
+++ b/vnext/src/components/Discover.js
@@ -1,9 +1,9 @@
 import 'whatwg-fetch';
 import React from 'react';
 import PropTypes from 'prop-types';
-import queryString from 'query-string';
 
 import Message from './Message';
+import Icon from './Icon';
 
 export default class Discover extends React.Component {
   constructor(props) {
@@ -18,8 +18,14 @@ export default class Discover extends React.Component {
   componentDidMount() {
     this.loadMessages();
   }
-  loadMessages() {
-    const url = 'https://api.juick.com/messages' + this.state.search;
+  componentWillReceiveProps(nextProps) {
+    if (this.props.location.search != nextProps.location.search) {
+      this.loadMessages(nextProps.location.search)
+    }
+  }
+  loadMessages(filter = '') {
+    this.setState({ msgs: []})
+    const url = 'https://api.juick.com/messages' + filter;
     fetch(url)
         .then(response => {
             return response.json()
@@ -35,12 +41,20 @@ export default class Discover extends React.Component {
     var nodes = this.state.msgs.map(msg => {
       return (<Message key={msg.mid} data={msg}/>);
     });
-    return (
+    return this.state.msgs.length > 0 ? (
       <div className="msgs" id="content">{nodes}</div>
+    ) : (
+      <div id="content" style={centeredStyle}><Icon name="ei-spinner" size="m"/></div>
     );
   }
 }
 
+const centeredStyle = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+}
+
 Discover.propTypes = {
   msgs: PropTypes.array
 };