Loading animations instead of "no messages" (#660)

Author: MexHigh

Diff for: ui/src/common/LoadingSpinner.tsx

@@ -7,7 +7,7 @@ export default function LoadingSpinner() {
     return (
         <DefaultPage title="" maxWidth={250}>
             <Grid item xs={12} style={{textAlign: 'center'}}>
-                <CircularProgress size={150} />
+                <CircularProgress size={40} />
             </Grid>
         </DefaultPage>
     );

Diff for: ui/src/message/Messages.tsx

@@ -1,4 +1,3 @@
-import CircularProgress from '@material-ui/core/CircularProgress';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import React, {Component} from 'react';
@@ -12,6 +11,7 @@ import {observable} from 'mobx';
 import ReactInfinite from 'react-infinite';
 import {IMessage} from '../types';
 import ConfirmDialog from '../common/ConfirmDialog';
+import LoadingSpinner from '../common/LoadingSpinner';
 
 type IProps = RouteComponentProps<{id: string}>;
 
@@ -87,7 +87,9 @@ class Messages extends Component<IProps & Stores<'messagesStore' | 'appStore'>,
                         </Button>
                     </div>
                 }>
-                {hasMessages ? (
+                {!messagesStore.loaded(appId) ? (
+                    <LoadingSpinner />
+                ) : hasMessages ? (
                     <div style={{width: '100%'}} id="messages">
                         <ReactInfinite
                             key={appId}
@@ -97,13 +99,7 @@ class Messages extends Component<IProps & Stores<'messagesStore' | 'appStore'>,
                             {messages.map(this.renderMessage)}
                         </ReactInfinite>
 
-                        {hasMore ? (
-                            <Grid item xs={12} style={{textAlign: 'center'}}>
-                                <CircularProgress size={100} />
-                            </Grid>
-                        ) : (
-                            this.label("You've reached the end")
-                        )}
+                        {hasMore ? <LoadingSpinner /> : this.label("You've reached the end")}
                     </div>
                 ) : (
                     this.label('No messages')

Diff for: ui/src/message/MessagesStore.ts

@@ -35,6 +35,8 @@ export class MessagesStore {
         return this.state[appId] || this.emptyState();
     };
 
+    public loaded = (appId: number) => this.stateOf(appId, /*create*/ false).loaded;
+
     public canLoadMore = (appId: number) => this.stateOf(appId, /*create*/ false).hasMore;
 
     @action