Page MenuHomePhabricator

[native] Create a restore backup screen
ClosedPublic

Authored by tomek on Thu, Dec 5, 7:37 AM.
Tags
None
Referenced Files
F3442231: progress.mov
Tue, Dec 10, 6:51 AM
Unknown Object (File)
Mon, Dec 9, 6:55 PM
Unknown Object (File)
Mon, Dec 9, 1:01 PM
Unknown Object (File)
Mon, Dec 9, 6:00 AM
F3419285: restore-details.png
Fri, Dec 6, 3:58 AM
F3414232: actual-restore-screen.png
Thu, Dec 5, 7:38 AM
Subscribers
None

Details

Summary

Users are navigated to this screen after they provide credentials and wait here until the backup is restored.

https://linear.app/comm/issue/ENG-9680/create-a-restoration-screen

Depends on D14038

Test Plan

Click restore button on the password screen and check if this screen is displayed and looks correctly.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

This is a prototype of this screen, so asking mostly about high-level feedback.

tomek requested review of this revision.Thu, Dec 5, 7:55 AM

Accepting to unblock, but the style of the box looks a bit inconsistent with the design language we're using here.

It's left-aligned, so it's maybe a bit less awkward than the box in D14064. But overall, these boxes with curved borders feel a little out-of-place.

This revision is now accepted and ready to land.Thu, Dec 5, 10:12 PM

Accepting to unblock, but the style of the box looks a bit inconsistent with the design language we're using here.

It's left-aligned, so it's maybe a bit less awkward than the box in D14064. But overall, these boxes with curved borders feel a little out-of-place.

This is how this screen looks like without the borders and with a consistent text style:

restore-details.png (2×1 px, 128 KB)

I think the consistency is improved, but three notes:

  • The styling of the three fields looks strange. It's not clear to me if the values there should be updating, and I feel like the spacing should be improved. Do we want bullet points here?
  • The spinner feels like some content is loading. I think we should show something a little different, that conveys more than an operation is proceeding. Is there something like a progress bar we can use here? What do other apps do for this?
  • What are "backup details"?
  • The styling of the three fields looks strange. It's not clear to me if the values there should be updating, and I feel like the spacing should be improved. Do we want bullet points here?
  • What are "backup details"?

The backup details is a header for the two fields that are displayed. Based on the discussion from https://linear.app/comm/issue/ENG-9680/create-a-restoration-screen it seems like getting the size might take some time, so if we decide to support only the timestamp for now, we shouldn't display the backup details header and the bullet points.

  • The spinner feels like some content is loading. I think we should show something a little different, that conveys more than an operation is proceeding. Is there something like a progress bar we can use here? What do other apps do for this?

Going to do some research about it.

Update backup details and a loading indicator

We're using a library https://www.npmjs.com/package/react-native-progress for displaying the multimedia upload progress, and we can consider using it here. I updated the diff with one of the options, but the NPM page presents some alternatives.

Looks okay. Would be nice to be able to show progress, but I recognize we'll probably need to wait on backup size calculation for that.

Looks okay. Would be nice to be able to show progress, but I recognize we'll probably need to wait on backup size calculation for that.

Having the size is only one part of this. If we had it, we would be able to show the downloading progress, but then there are two more steps: decrypting and restoring - for these, showing an actual progress could be a lot more challenging. Regardless, without user data backup, showing the progress isn't too useful - with just the keys, the operation shouldn't take too much time.

native/account/restore-backup-screen.react.js
47 ↗(On Diff #46287)

Updated the copy in the last revision

This revision was automatically updated to reflect the committed changes.