From 12c7164f2e17447b5049ca86ad113ec09f57fc21 Mon Sep 17 00:00:00 2001
From: Leon Schmidt <50419884+MexHigh@users.noreply.github.com>
Date: Sat, 22 Jun 2024 21:31:50 +0200
Subject: [PATCH] Loading animations instead of "no messages" (#660)

---
 ui/src/common/LoadingSpinner.tsx |  2 +-
 ui/src/message/Messages.tsx      | 14 +++++---------
 ui/src/message/MessagesStore.ts  |  2 ++
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/ui/src/common/LoadingSpinner.tsx b/ui/src/common/LoadingSpinner.tsx
index 3f0df56..fc35a42 100644
--- a/ui/src/common/LoadingSpinner.tsx
+++ b/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 --git a/ui/src/message/Messages.tsx b/ui/src/message/Messages.tsx
index 5b6eacc..120fe62 100644
--- a/ui/src/message/Messages.tsx
+++ b/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 --git a/ui/src/message/MessagesStore.ts b/ui/src/message/MessagesStore.ts
index 7bd8eea..136d2a9 100644
--- a/ui/src/message/MessagesStore.ts
+++ b/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