mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-21 07:46:06 +08:00
fix(NUX): show when initial sync is taking place
Summary: fixes T3563 todo [x] check with @bengotow and @evan -- does this solution make sense to you? [x] decide on the actual visual cue to the user -- @bengotow you suggested a loader or spinner, but i was thinking that actual copy should be used so it doesn't look like an unhelpful spinner which goes indefinitely. what do you think of the copy here? [ ] implement spinner similar to sending a draft [ ] write tests [ ] verify that we're showing progress in a helpful way problem - new users would see nothing in edgehill after they log in, with no indication on why they can't see any of their mail - in actuality, our backend is actively pulling all their mail to serve it to edgehill - new users think edgehill is broken because they're unaware of the work that our backend was doing solution - when the backend sends deltas to edgehill, we show a message in the activity bar saying that we're trying to get their mail - we'll show the sync progress Test Plan: still need to add tests. all previous tests still green. Reviewers: bengotow, evan Subscribers: sdw, bengotow, evan Maniphest Tasks: T3563 Differential Revision: https://phab.nylas.com/D2032
This commit is contained in:
parent
314ebc37c7
commit
6608b21da9
|
@ -0,0 +1,8 @@
|
|||
{Actions} = require 'nylas-exports'
|
||||
NylasStore = require 'nylas-store'
|
||||
|
||||
class AccountSidebarLongPollStore extends NylasStore
|
||||
constructor: ->
|
||||
@listenTo Actions.longPollReceivedRawDeltasPing, => @trigger()
|
||||
|
||||
module.exports = new AccountSidebarLongPollStore()
|
|
@ -8,7 +8,8 @@ NotificationStore = require './notifications-store'
|
|||
NylasSyncStatusStore,
|
||||
TaskQueueStatusStore,
|
||||
NylasAPI} = require 'nylas-exports'
|
||||
{TimeoutTransitionGroup} = require 'nylas-component-kit'
|
||||
ActivitySidebarLongPollStore = require './activity-sidebar-long-poll-store'
|
||||
{TimeoutTransitionGroup, RetinaImg} = require 'nylas-component-kit'
|
||||
|
||||
class ActivitySidebar extends React.Component
|
||||
@displayName: 'ActivitySidebar'
|
||||
|
@ -26,6 +27,7 @@ class ActivitySidebar extends React.Component
|
|||
@_unlisteners.push TaskQueueStatusStore.listen @_onDataChanged
|
||||
@_unlisteners.push NylasSyncStatusStore.listen @_onDataChanged
|
||||
@_unlisteners.push NotificationStore.listen @_onDataChanged
|
||||
@_unlisteners.push ActivitySidebarLongPollStore.listen @_onDeltaReceived
|
||||
|
||||
componentWillUnmount: =>
|
||||
unlisten() for unlisten in @_unlisteners
|
||||
|
@ -34,6 +36,9 @@ class ActivitySidebar extends React.Component
|
|||
render: =>
|
||||
items = [].concat(@_renderSyncActivityItem(), @_renderNotificationActivityItems(), @_renderTaskActivityItems())
|
||||
|
||||
if @state.receivingDelta
|
||||
items.push @_renderDeltaSyncActivityItem()
|
||||
|
||||
names = classNames
|
||||
"sidebar-activity": true
|
||||
"sidebar-activity-error": error?
|
||||
|
@ -108,6 +113,16 @@ class ActivitySidebar extends React.Component
|
|||
</div>
|
||||
</div>
|
||||
|
||||
_renderDeltaSyncActivityItem: =>
|
||||
<div className="item" key="delta-sync-item">
|
||||
<div style={padding: "14px 7px 0 10px", float: "left"}>
|
||||
<RetinaImg name="sending-spinner.gif" mode={RetinaImg.Mode.ContentPreserve} />
|
||||
</div>
|
||||
<div className="inner">
|
||||
Getting your mail…this might take a while
|
||||
</div>
|
||||
</div>
|
||||
|
||||
_renderNotificationActivityItems: =>
|
||||
@state.notifications.map (notification) ->
|
||||
<div className="item" key={notification.id}>
|
||||
|
@ -127,5 +142,16 @@ class ActivitySidebar extends React.Component
|
|||
tasks: TaskQueueStatusStore.queue()
|
||||
sync: NylasSyncStatusStore.state()
|
||||
|
||||
_onDeltaReceived: =>
|
||||
if @_timeoutId
|
||||
clearTimeout @_timeoutId
|
||||
|
||||
@_timeoutId = setTimeout(( =>
|
||||
delete @_timeoutId
|
||||
@setState receivingDelta: false
|
||||
), 15000)
|
||||
|
||||
@setState receivingDelta: true
|
||||
|
||||
|
||||
module.exports = ActivitySidebar
|
||||
|
|
|
@ -64,6 +64,7 @@ class NylasSyncWorkerPool
|
|||
|
||||
_handleDeltas: (deltas) ->
|
||||
Actions.longPollReceivedRawDeltas(deltas)
|
||||
Actions.longPollReceivedRawDeltasPing()
|
||||
|
||||
# Create a (non-enumerable) reference from the attributes which we carry forward
|
||||
# back to their original deltas. This allows us to mark the deltas that the
|
||||
|
|
|
@ -118,6 +118,7 @@ class Actions
|
|||
|
||||
@longPollStateChanged: ActionScopeWorkWindow
|
||||
@longPollReceivedRawDeltas: ActionScopeWorkWindow
|
||||
@longPollReceivedRawDeltasPing: ActionScopeGlobal
|
||||
@longPollProcessedDeltas: ActionScopeWorkWindow
|
||||
@longPollConnected: ActionScopeWorkWindow
|
||||
@longPollOffline: ActionScopeWorkWindow
|
||||
|
|
Loading…
Reference in a new issue