Mailspring/static/components/spinner.less
Ben Gotow 45bb16561f feat(offline-mode, undo-redo): Tasks handle network errors better and retry, undo/redo based on tasks
Summary:
This diff does a couple things:

- Undo redo with a new undo/redo store that maintains it's own queue of undo/redo tasks. This queue is separate from the TaskQueue because not all tasks should be considered for undo history! Right now just the AddRemoveTagsTask is undoable.

- NylasAPI.makeRequest now returns a promise which resolves with the result or rejects with an error. For things that still need them, there's still `success` and `error` callbacks. I also added `started:(req) ->` which allows you to get the underlying request.

- Aborting a NylasAPI request now makes it call it's error callback / promise reject.

- You can now run code after perform local has completed using this syntax:

```
    task = new AddRemoveTagsTask(focused, ['archive'], ['inbox'])
    task.waitForPerformLocal().then ->
      Actions.setFocus(collection: 'thread', item: nextFocus)
      Actions.setCursorPosition(collection: 'thread', item: nextKeyboard)
    Actions.queueTask(task)
```

- In specs, you can now use `advanceClock` to get through a Promise.then/catch/finally. Turns out it was using something low level and not using setTimeout(0).

- The TaskQueue uses promises better and defers a lot of the complexity around queueState for performLocal/performRemote to a task subclass called APITask. APITask implements "perform" and breaks it into "performLocal" and "performRemote".

- All tasks either resolve or reject. They're always removed from the queue, unless they resolve with Task.Status.Retry, which means they internally did a .catch (err) => Promise.resolve(Task.Status.Retry) and they want to be run again later.

- API tasks retry until they succeed or receive a NylasAPI.PermanentErrorCode (400,404,500), in which case they revert and finish.

- The AddRemoveTags Task can now take more than one thread! This is super cool because you can undo/redo a bulk action and also because we'll probably have a bulk tag modification API endpoint soon.

Getting undo / redo working revealed that the thread versioning system we built isn't working because the server was incrementing things by more than 1 at a time. Now we count the number of unresolved "optimistic" changes we've made to a given model, and only accept the server's version of it once the number of optimistic changes is back at zero.

Known Issues:

- AddRemoveTagsTasks aren't dependent on each other, so if you (undo/redo x lots) and then come back online, all the tasks try to add / remove all the tags at the same time. To fix this we can either allow the tasks to be merged together into a minimal set or make them block on each other.

- When Offline, you still get errors in the console for GET requests. Need to catch these and display an offline status bar.

- The metadata tasks haven't been updated yet to the new API. Wanted to get it reviewed first!

Test Plan: All the tests still pass!

Reviewers: evan

Reviewed By: evan

Differential Revision: https://phab.nylas.com/D1694
2015-07-07 13:38:53 -04:00

68 lines
1.3 KiB
Text

@import "ui-variables";
.spinner {
margin: 0;
width: 94px;
text-align: center;
opacity: 1;
-webkit-transition: opacity 0.2s linear; //transition
pointer-events: none;
}
.spinner.hidden {
opacity: 0;
}
.spinner.paused {
> div {
// important. animating with opacity 0 chews up about 5% cpu
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
}
.spinner-cover {
&.hidden {
opacity: 0;
}
}
.spinner > div {
width: 18px;
height: 18px;
background-color: @gray-light;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
margin-right:4px;
margin-left:4px;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}