Implement download/decryption activity indicator (first iteration)

[eloquence]

Related to #261, but note that we currently do not have any activity indicator in the client, so this is not merely a styling question.

Per @redshiftzero the current stages a successful download goes through are as follows:

1. Not downloaded
2. Download started - download user feedback begins
3. Download finishes - download user feedback ends
4. Decryption is attempted - decryption user feedback begins
5. Decryption is finished - decryption user feedback ends
6. "Open" is shown

Currently, the client skips directly from "Download" to "Open" without any activity indication in between.

@ninavizz has committed to delivering iterated designs prior to the 4/3-4/17 sprint kick-off, ideally these designs should cover:

• download activity indicator and place for contextual messages
• decryption activity indicator and place for contextual messages
• final "Open" state

For the purpose of a first iteration, the following are out of scope:

• displaying progress (0%, 25%, etc.)
• displaying filenames of decrypted files

[ninavizz]

This spec was delivered back in April. I'll examine the numbers up above, and update it accordingly—asd well as a MOSCoW breakdown of how I'm seein' the ideal state coming together across iterations.

[ninavizz]

Also, this is how to determine grouping of files in one unified pane vs piecemeal, per the spec. Likely not going to make it into Beta, but putting this here to get it on the record:

---

As a Journalist;
I want to see all messages from a Source, aligned to the left-edge of the Messages Pane.

And I want to see all messages from myself and my newsroom peers, aligned to the right-edge of the Messages Pane.
I also want to see all items shown in descending chronological order, with the newest items towards the bottom and the oldest items towards the top.
Because this is an established pattern.

When both messages and files are sent within the same 12hr window

Scenario: Source sends 1 message and 1 file, 2 hours apart

Given I'm a logged in Journalist, at 8am.
When I select the Source "Benign Artichoke" in the Sources List.
And “Benign Artichoke” sent 1 message at 2:30am and 1 file at 3:30am
Then I see 1 message appear above 1 file, in a ‘single session’ grouping along the left edge of the Messages Pane.

Scenario: Source sends 1 message and 2 files, over a 2 hour timespan

Given I'm a logged in Journalist, at 8am.
When I select the Source "Deviant Potato" in the Sources List.
And “Deviant Potato” sent 1 file at 4:32am, 1 message at 5am, and a second file at 6:20am
Then I see 1 message appear above 2 files, in a ‘single session’ grouping along the left edge of the Messages Pane.

Scenario: Source sends 3 message and 8 files, over a 6 hour timespan

tbd

Scenario: Source sends 1 file and 1 message, +12 hours apart**

Given I'm a logged in Journalist, at 10am on a Thursday.
When I select the Source "Disco Bunny" in the Sources List.
And “Disco Bunny” sent 1 file at 2:30am on Monday and 1 message at 12pm on Wednesday
Then I see 1 file appear, a gap of whitespace, then one message, along the left edge of the Messages Pane.

[ninavizz]

This is the current state of the Client, 28 May 2019:

@eloquence My own prioritization of Beta files pane stuff (and this ticket within that):

MUST

1. Replace today's uglypants/temporary icon with a less unattractive icon — same size, etc.
2. Add "Active State" to today's widget, that would show Icon and Text both at 40% alpha, and later be expanded to include an animation spinner.
3. Implement "Things are happening, packets are flying" Global Network Activity Indicator to trigger when a download is started.
   —At this point, when a user clicks "Download" the icon/text will display as "Active State" and the network activity indicator will animate—
4. Add LDS-ring animation atop icon for file's download/decrypt Active state. Animation will begin when user clicks "download" and will end once file displays "Open"
5. Tackle Extract and display filenames of downloaded documents #163

SHOULD

1. Begin to apply proper/final File Pane Styling

Note: My assumption, is that the MUST stuff above will be significantly easier to get out the door for Beta abreast other priorities, than the far more involved spec + Gherkin'd logic above, wd be.

[eloquence]

Since the above comment this has undergone further revisions; the current proposed pre-beta and post-beta designs can be found here:
freedomofpress/securedrop-ux#55 (comment)

Specifically, see the "Downloading" and "Decrypting" states here:
https://app.zeplin.io/project/5c807ea562f734bd2756b243/screen/5d1301b692a0cd04b141175d

[ninavizz]

Spinner in Zeplin mockup: freedomofpress/securedrop-ux#17 (comment)

:)

[eloquence]

@ntoll: Noting that this is higher priority than #135 in this sprint.

[ntoll]

OK... I've taken a look into this. In terms of implementation, I'll initially follow what the "refresh" button does with its spinner. We can refine from there. 👍 Hopefully I'll have something to show by end of my afternoon.