Fix requestIdleCallback logic (#112)

* fix(#111): hydration failure in safari * chore: update package lock * fix(#111): use requestIdleCallback shim * chore: changeset
natemoo-re · Jan 31, 2021 · ddd48ea · ddd48ea
1 parent 33a7844
commit ddd48ea
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 19 deletions.
diff --git a/.changeset/cold-pumas-sniff.md b/.changeset/cold-pumas-sniff.md
@@ -0,0 +1,5 @@
+---
+"microsite": patch
+---
+
+Include shim for `requestIdleCallback` for Safari
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/microsite/assets/microsite-runtime.js b/packages/microsite/assets/microsite-runtime.js
@@ -1,5 +1,23 @@
 import { h, hydrate as mount } from "preact";
 
+if (!("requestIdleCallback" in window)) {
+  window.requestIdleCallback = function (cb) {
+      return setTimeout(function () {
+        var start = Date.now();
+        cb({
+          didTimeout: false,
+          timeRemaining: function () {
+            return Math.max(0, 50 - (Date.now() - start));
+          },
+        });
+      }, 1);
+    };
+
+  window.cancelIdleCallback = function (id) {
+    clearTimeout(id);
+  };
+}
+
 const createObserver = (hydrate) => {
   if (!("IntersectionObserver" in window)) return null;
 
@@ -29,7 +47,6 @@ function attach(fragment, data, { key, name, source }) {
   switch (method) {
     case "idle": {
       if (
-        !("requestIdleCallback" in window) ||
         !("requestAnimationFrame" in window)
       )
         return setTimeout(hydrate, 0);
@@ -153,9 +170,6 @@ export default (manifest) => {
       });
     }
   };
-  if ("requestIdleCallback" in window) {
-    requestIdleCallback(init, { timeout: 1000 });
-  } else {
-    init();
-  }
+
+  requestIdleCallback(init, { timeout: 1000 });
 };