croz-ltd/tiller

DragZoneLoader - spinner appears just as a flicker

Closed this issue · 3 comments

Basic information

When uploading a document to DragZone that has set loader (spinner or percentage) if upload is done fast spinner just appears as a flicker and when uploading wrong type spinner will continue to spin until user refreshes page, reuploads or else.

  • Tiller version:
    1.9.0.
  • Module:
    DragZoneField - DragZoneFieldLoader

Additional information

Bug description

When uploading document to DragZoneField that has set loader if document or .png or something else is small in size spinner is shown for a short period of time (just a flicker).
When uploading wrong type of data to DragZoneField spinner will endlessly spin.

Steps to reproduce

  1. flicker spinner
  • upload small document or picture to dragzonefield
  1. wrong data type upload
  • upload wrong type of data to dragzonefield

Expected behavior

  • spinner should last at least 2s, so it doesnt look like a spinner or we could have an option to set delay ourselves
  • spinner should stop when wrong type of data is uploaded

Actual behavior

snippet-1.mp4
snippet-2.mp4

I would like to go in a direction add a bit of time (300ms) before loader appears. That time should be configurable.

The time before the loader is not the problem, and it will efectively not fix the issue of the user not having a visual cue of the uploading process, the problem is that if/when it starts loading and it's a quick load, it flinches the screen which is a bad UX.
Sometimes it's resolved by having a 2-3 sec long loader/delay but that is okay for a small amout of uploaded files. If you have to upload 20 files, that is going be verry annoying.

  • it would be nice if the spinner delay could be defined.

A better UX would be if something like this were to appear directly on the file because it solves a specific case of somebody dumping multiple files at one, we could have the ability to show the progress for each of the files.

image

(Ofcourse this is just an idea, but the point is that UX should be considered and that even tho the spinner exists, it works in perfect case scenarios where you have tu upload 1-2 files into the same area that are bigger in size and have to load for a certain amount of time)

FileList is currently totally separate component and progress like this would need a heavy refactor. Regarding your first point, we can add 2 props preLoadDelay and postLoadDelay with which you can modify specific time when loading flag is switched.