Ipfs-webui: Display progress status while importing files

[andrasfuchs]

I use ipfs-desktop 0.8.0.0 (and go-ipfs 0.4.21) on Windows 10.
When I add a file (or multiple files) by drag-and-drop in the files section of the desktop app, there is no indication about the progress, although it can take a while on my computer if the size of the file is big.

It would be great to have a progress dialog with the details of the process (bytes transferred, percentage, speed, etc.), just like when you copy files using a file manager.

[hacdias]

@andrasfuchs hmm... The 'add' button isn't showing the progress? I thought it was. Perhaps there's a bug or we should find a better way to show the progress.

[andrasfuchs]

I tried both drag-and-dropping the file from Windows Explorer and using the "+Add" button on the Files page, there was no progress bar displayed.

[RubenKelevra]

I can confirm this for Chrome on Linux as well. I've added a folder with 5k files, just for testing. There's a popup which states how many files there are and if I really want to add them...

After that, there's no information in the UI, you can click freely around.

For the user there's zero feedback that something is in progress.

[jessicaschilling]

Issue https://github.com/ipfs-shipyard/ipfs-desktop/issues/750 (Inform user about potential delays before added content is reachable at public gateway) is functionally a different request, but tugs on similar strings mental-model-wise. Tying these issues together via this comment, so we can use whichever one is solved first to inform how we present information on the other one.

[jessicaschilling]

Note: This is a duplicate, functionally, of https://github.com/ipfs-shipyard/ipfs-desktop/issues/1217 for Desktop. Work on these should happen in tandem.

[jessicaschilling]

ETA: Let's reuse whatever pattern we arrive at for download progress status, too. See https://github.com/ipfs-shipyard/ipfs-desktop/pull/1419#issuecomment-617454570 .

[jessicaschilling]

First pass at non-branded wireframes for adding or downloading files:
https://www.figma.com/file/BQjzJcaKuNrNgeDnoZ664D/Web-UI-upload-download-progress?node-id=0%3A1

@lidel, @rafaelramalho19, @hacdias -- would appreciate feedback when you get the chance!

[rafaelramalho19]

LGTM Jessica! If it's okay I'll start working on this 🎉

[lidel]

LGTM. @rafaelramalho19 check my comments in figma about unifying language and having the same UI for importing files and directories from local machine and from IPFS paths.

[jessicaschilling]

Added the chevron expand/collapse arrow to ipfs-css under https://github.com/ipfs-shipyard/ipfs-css/pull/41 ... @rafaelramalho19, once we're assured we like the chevrons in situ, I'll merge and release 😊

[jessicaschilling]

NB: https://github.com/ipfs-shipyard/ipfs-webui/pull/1481 PRs for replacing "add" language with "import" language throughout Web UI.

[rafaelramalho19]

Due to limitations with the current usage of HTTP for file imports in WebUI, we're unable to show progress properly.
So for the time being, we'll switch the initial approach to infinite loading indicators and we'll switch back in the future.