Improve Download UX

[clostao]

When fetching files from the DSN the download duration might take more than a usual download. The unusual download duration time could generate a poor UX. We should try to make some changes to improve it.

cc: @iamnamananand996 @jfrank-summit

[clostao]

For auto-drive frontend, I'd go for what @iamnamananand996 suggested of having a more complete toast that explicitly indicates that the file is being downloaded from the DSN.

[iamnamananand996]

Option 1

Not sure, either it is too much to ask. I would like to have bellow on the getway.

Purpose	URL Example
Preview	https://gateway.autonomys.xyz/file/CID
Download	https://gateway.autonomys.xyz/file/CID?download=true

and let the downloading be handled by the native browser, the same way we would when downloading any small or big file from centralised storage.

It may require some of these headers to be added to our getaway server

res.setHeader('Content-Type', 'application/octet-stream');


// this trigger the native browser downloading
res.setHeader('Content-Disposition', 'attachment; filename="example.zip"');


res.setHeader('Content-Length', fileSize);
stream.pipe(res);

Then on the frontend, we will need to just add

<a href="https://gateway.autonomys.xyz/file/bafk...?download=true" download>Download File</a>

Option 2

We have already discussed on Bi weekly #360 (comment)

cc - @clostao, @jfrank-summit , @marc-aurele-besner

[iamnamananand996]

Ref: #361 (comment)

I think that the UI for download would be to add a button for bring to cache.

For showing asynchronous downloads, we could make a table to be shown just above the files table and enable the user to dismiss (just avoid being shown).

I would be happy with this approach, too. The reason for asking about Option 1 was to use existing things 😅 .

[clostao]

This was heavily improved with chunked downloads + async downloads though we could still work on this