Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uppy dashboard loading freezes in Safari #1613

Closed
jumpinvestor opened this issue May 30, 2019 · 9 comments
Closed

Uppy dashboard loading freezes in Safari #1613

jumpinvestor opened this issue May 30, 2019 · 9 comments
Assignees
Labels
Angular Help Wanted Indicates that we’d especially appreciate community input in this issue

Comments

@jumpinvestor
Copy link

jumpinvestor commented May 30, 2019

The Uppy dashboard has started freezing in Safari at the "adding metadata" stage (leaving out the specific metadata here):

Screen Shot 2019-05-29 at 5 18 13 PM

When it loads successfully in other browsers, the last line would be:

Screen Shot 2019-05-29 at 5 28 29 PM

It stalls long enough to freeze the browser tab with it, then eventually Safari force reloads the tab.

Latest version of Uppy and Safari, minimal page with very little on it but a basic Angular 7 HTML layout. It works fine in other browsers.

@arturi
Copy link
Contributor

arturi commented May 30, 2019

Hi! Thanks for reporting. Could you create a CodePen or JSFiddle, or maybe https://codesandbox.io, since the latter supports npm packages easily, with your setup? I tried in Safari with latest Uppy, it loads right away for me, I see the “resized” log. Added GoldenRetriever — also works fine.

Metadata could be the issue, if it freezes after trying to add it, how are you adding the metadata and what’s in it?

@jumpinvestor
Copy link
Author

jumpinvestor commented May 30, 2019

Unfortunately, not easily, since this is a server-side rendered page. The metadata is an object with 3 string values, set with .setMeta(). Taking each Dashboard option out in succession doesn't seem to change it.

I think it could be related to Uppy trying to resize the Dashboard container in a way that Safari doesn't recognize, but I'm having difficulty finding a way to log that process. EDIT: The Dashboard doesn't appear to attach to the DOM at all:

Screen Shot 2019-05-30 at 11 07 43 AM

If you'd like to see the live page with the issue, it's at https://sand.ee, accessed via the "Share Photos" link in the top menu bar.

@arturi
Copy link
Contributor

arturi commented May 30, 2019

I have tried your website on the url you provided, and it only worked in Chrome for me, not Firefox or Safari — both freeze and Firefox suggests killing the page.

Since Uppy demo on the homepage https://uppy.io and on the examples page https://uppy.io/examples/dashboard/ work well in Safari, Firefox and Chrome, I’m leaning towards a theory that this is an issue of how your Angular app interacts with Uppy. I see the page is using Web Components heavily, that could explain why it works well in Chrome and not in other browsers — many features are only natively supported in Chrome, other browsers needing poyfills. This is just a theory though.

Could you share the whole Uppy integration code that you are using? Could you try and pass target: 'body' to the Dashboard, so it’s rendered outside of your Angular app?

@jumpinvestor
Copy link
Author

jumpinvestor commented May 30, 2019

Very helpful. Setting the target outside of the app structure partially worked, but it still kept stalling before fulling loading the Dashboard. After looking into it a little more, I think this could be it:

@uppy/dashboard/src/index.js, starting at line 476:

Screen Shot 2019-05-30 at 4 38 57 PM

For whatever reason, the ResizeObserver polyfill isn't interacting well with the Angular app structure in Safari or Firefox. I think either the listener is not being set or the event to be observed isn't being emitted/captured correctly (haven't pinned that down) inside startListeningToResize().

Commenting out the reference to it then manually specifying the values it was meant to set, in initEvents(), seems to fix it so far:

Screen Shot 2019-05-30 at 4 41 29 PM

@kvz
Copy link
Member

kvz commented Jun 3, 2019

Hi, this might very well be an issue about Uppy misbehaving in conjunction with Angular. Unfortunately we don't have Angular expertise on the team right now, but we've asked for help, hopefully we can get someone skilled from the community to take a closer look!

@eptgrant
Copy link

We ran into the same problem and 'solved' it by instantiating Uppy outside of the Angular scope.

Not an ideal solution by any means.

this.zone.runOutsideAngular(() => { setTimeout(() => { const uppyInstance = new UppyCore.Uppy(defaults.uppyDefaults); // etc }, 100); });

@arturi
Copy link
Contributor

arturi commented Jul 17, 2019

Could be related, too: #702 (comment)

@arturi arturi added the Angular label Aug 1, 2019
@arturi arturi added the Help Wanted Indicates that we’d especially appreciate community input in this issue label Oct 18, 2019
@arturi
Copy link
Contributor

arturi commented Mar 6, 2020

@Murderlon
Copy link
Member

This seems to be resolved and we now have official angular support. Feel free to reopen if that's not the case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Angular Help Wanted Indicates that we’d especially appreciate community input in this issue
Projects
None yet
Development

No branches or pull requests

6 participants