Auto merge of #4012 - Turbo87:resize-polyfill, r=locks

Use `ResizeObserver` polyfill, if necessary

This shouldn't be necessary due to our browser support policy (see https://caniuse.com/mdn-api_resizeobserver), but we seem to have plenty of users that regularly run into this, due to Chart.js using the `ResizeObserver` API underneath.

The polyfill is loaded async if we detect that `ResizeObserver` is not implemented natively in the browser.

see https://github.com/juggle/resize-observer

Fixes #4011

Author: bors

app/routes/application.js

@@ -11,7 +11,7 @@ export default class ApplicationRoute extends Route {
   @service playground;
   @service sentry;
 
-  beforeModel() {
+  async beforeModel() {
     this.router.on('routeDidChange', () => {
       this.sentry.configureScope(scope => {
         scope.setTag('routeName', this.router.currentRouteName);
@@ -31,6 +31,13 @@ export default class ApplicationRoute extends Route {
     this.preloadPlaygroundCratesTask.perform().catch(() => {
       // ignore all errors since we're only preloading here
     });
+
+    // load ResizeObserver polyfill, only if required.
+    if (!('ResizeObserver' in window)) {
+      console.debug('Loading ResizeObserver polyfill…');
+      let module = await import('@juggle/resize-observer');
+      window.ResizeObserver = module.ResizeObserver;
+    }
   }
 
   @action loading(transition) {

package.json

@@ -37,6 +37,7 @@
     "trailingComma": "all"
   },
   "dependencies": {
+    "@juggle/resize-observer": "3.3.1",
     "@sentry/browser": "6.13.3",
     "@sentry/integrations": "6.13.3",
     "chart.js": "3.5.1",

yarn.lock

@@ -1718,6 +1718,11 @@
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
   integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
 
+"@juggle/[email protected]":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0"
+  integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==
+
 "@miragejs/pretender-node-polyfill@^0.1.0":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@miragejs/pretender-node-polyfill/-/pretender-node-polyfill-0.1.2.tgz#d26b6b7483fb70cd62189d05c95d2f67153e43f2"