urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-11-28 22:33:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'lf/chat-loading-indicator' (#2765)

Browse Source 
* origin/lf/chat-loading-indicator:
  chat-fe: add backlog loading indicator

Signed-off-by: Jared Tobin <jared@tlon.io>
This commit is contained in:
Jared Tobin 2020-04-21 18:49:32 +04:00
commit 55d2f555e9
No known key found for this signature in database
GPG Key ID: 0E4647D58F8A69E4
2 changed files with 36 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
pkg/interface/chat/src/js/components/chat.js
View File

@ -7,6 +7,7 @@ import { Route, Link } from "react-router-dom";
import { store } from "/store";
import { ResubscribeElement } from '/components/lib/resubscribe-element';
import { BacklogElement } from '/components/lib/backlog-element';
import { Message } from '/components/lib/message';
import { SidebarSwitcher } from '/components/lib/icons/icon-sidebar-switch.js';
import { ChatTabBar } from '/components/lib/chat-tabbar';
@ -335,6 +336,10 @@ export class ChatScreen extends Component {
ref={el => {
this.scrollElement = el;
}}></div>
{(props.chatInitialized &&
!(props.station in props.inbox)) && (
<BacklogElement />
)}
{(
props.chatSynced &&
!(props.station in props.chatSynced) &&
@ -361,6 +366,10 @@ export class ChatScreen extends Component {
ref={el => {
this.scrollElement = el;
}}></div>
{(props.chatInitialized &&
!(props.station in props.inbox)) && (
<BacklogElement />
)}
{(
props.chatSynced &&
!(props.station in props.chatSynced) &&

27
pkg/interface/chat/src/js/components/lib/backlog-element.js Normal file
View File

@ -0,0 +1,27 @@
import React, { Component } from 'react';
import classnames from 'classnames';
export class BacklogElement extends Component {
render() {
let props = this.props;
return (
<div className="center mw6">
<div className="db pa3 ma3 ba b--gray4 bg-gray5 b--gray2-d bg-gray1-d white-d flex items-center">
<img className="invert-d spin-active v-mid"
src="/~chat/img/Spinner.png"
width={16}
height={16}
/>
<p className="lh-copy db ml3">
Past messages are being restored
</p>
</div>
</div>
);
}
}