colin
/
sharded-gotify
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Leon Schmidt 2024-06-22 21:31:50 +02:00 committed by GitHub
parent a4c19c3a98
commit 12c7164f2e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/common/LoadingSpinner.tsx
View File

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

14
ui/src/message/Messages.tsx
View File

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

2
ui/src/message/MessagesStore.ts
View File

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