Lazy load toots using IntersectionObserver (#3191)

* refactor(components/status_list): Lazy load using IntersectionObserver

* refactor(components/status_list): Avoid setState bottleneck

* refactor(components/status_list): Update state correctly

* fix(components/status): Render if isIntersecting is undefined

* refactor(components/status): Recycle timeout

* refactor(components/status): Reduce animation duration

* refactor(components/status): Use requestIdleCallback

* chore: Split polyfill bundles

* refactor(components/status_list): Increase rootMargin to 300%

* fix(components/status): Check if onRef is not defined

* chore: Add note about polyfill bundle splitting

* fix(components/status): Reduce animation duration to 0.3 seconds

app/javascript/packs/application.js

@@ -1,9 +1,30 @@
 import main from '../mastodon/main';
 
-if (!window.Intl || !Object.assign || !Number.isNaN ||
-    !window.Symbol || !Array.prototype.includes) {
-  // load polyfills dynamically
-  import('../mastodon/polyfills').then(main).catch(e => {
+const needsBasePolyfills = !(
+  window.Intl &&
+  Object.assign &&
+  Number.isNaN &&
+  window.Symbol &&
+  Array.prototype.includes
+);
+
+const needsExtraPolyfills = !(
+  window.IntersectionObserver &&
+  window.requestIdleCallback
+);
+
+// Latest version of Firefox and Safari do not have IntersectionObserver.
+// Edge does not have requestIdleCallback.
+// This avoids shipping them all the polyfills.
+if (needsBasePolyfills) {
+  Promise.all([
+    import('../mastodon/base_polyfills'),
+    import('../mastodon/extra_polyfills'),
+  ]).then(main).catch(e => {
+    console.error(e); // eslint-disable-line no-console
+  });
+} else if (needsExtraPolyfills) {
+  import('../mastodon/extra_polyfills').then(main).catch(e => {
     console.error(e); // eslint-disable-line no-console
   });
 } else {