Uppy Doesn't Change (CSS) Cursor to "wait" During Upload

[jwalkerinterpres]

Initial checklist

• I understand this is a bug report and questions should be posted in the Community Forum
• I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

No response

Steps to reproduce

1. Create an Uppy file input:

<FileInput
    uppy={uppy.current}
    locale={{ strings: { chooseFiles: '' } }}
    pretty
/>

2. Upload a file through that input

3. You would expect that the mouse cursor would change its cursor CSS to a "wait" icon, to indicate that the user needs to wait until the upload completes ... but this doesn't happen.

Furthermore, it seems impossible to change that the style yourself, since the input is being generated inside Uppy's code, and it is setting its own CSS style (of cursor: pointer).

Expected behavior

I see no reason why the cursor should continue using a pointer icon during an upload. It should change to a "wait" icon (or maybe a "progress" icon). It should only go back to the pointer cursor after the upload is complete, and the user can take an action again.

Actual behavior

The cursor stays as a "pointer" throughout the entire interaction.

[Murderlon]

Hi, can you create a pull request for it? :)

[jwalkerinterpres]

I'm not really familiar with the Uppy codebase, so I wouldn't know where to add the code. However, the code itself is extremely simple:

1. Wherever in the code Uppy starts an upload, add this line:

uppyHtmlElement.style.cursor = 'wait';

2. Whenever the upload completes (successfully or otherwise) add this line:

uppyHtmlElement.style.cursor = '';

or this line (the two are functionally the same):

uppyHtmlElement.style.cursor = 'pointer';

The key thing is just that it needs to be done on the Uppy element, because you've styled that element to have a pointer cursor style all the time. This means you're the only one who can change that element's CSS (or at least, conveniently).