about summary refs log tree commit diff
path: root/app/javascript/packs
diff options
context:
space:
mode:
authorSorin Davidoi <sorin.davidoi@gmail.com>2017-05-24 17:55:00 +0200
committerEugen Rochko <eugen@zeonfederated.com>2017-05-24 17:55:00 +0200
commit8e4d1cba00b48bc52dc406956a245856c489e48a (patch)
tree80793edff7a146d5afc0b7df09da696d623111a6 /app/javascript/packs
parent676ba50601d04dcd15930bb92aea918cb6cdf041 (diff)
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
Diffstat (limited to 'app/javascript/packs')
-rw-r--r--app/javascript/packs/application.js29
1 files changed, 25 insertions, 4 deletions
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index ca6b476e1..01c28e768 100644
--- a/app/javascript/packs/application.js
+++ b/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 {