From 4f99a6f66e925a70cba78d8e1879a4450db21b7f Mon Sep 17 00:00:00 2001
From: calinoracation <callie.riggins@airbnb.com>
Date: Fri, 1 Mar 2024 10:29:07 -0800
Subject: [PATCH] Update to delay on fetch call in a microtask

---
 src/index.js               | 63 ++++++++++++++++++++++++++++++-
 src/initialize.js          | 76 --------------------------------------
 src/scroll-timeline-css.js | 12 ++++--
 3 files changed, 70 insertions(+), 81 deletions(-)
 delete mode 100644 src/initialize.js

diff --git a/src/index.js b/src/index.js
index 9f36fd4..5aa9a35 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,6 +12,65 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { initPolyfill } from './initialize';
+import {
+  ScrollTimeline,
+  ViewTimeline,
+} from "./scroll-timeline-base";
+import {
+  animate,
+  elementGetAnimations,
+  documentGetAnimations,
+  ProxyAnimation
+} from "./proxy-animation.js";
 
-initPolyfill('*');
+import { initCSSPolyfill } from "./scroll-timeline-css"
+
+/**
+ * Initializes the polyfill and by default will parse all stylesheets on the
+ * page.
+ * @param {'*' | string | RegExp | Array<string | RegExp>} allowedOrigins
+ * Defaults to *, which attempts to parse all linked stylesheets. It also
+ * accepts a string, a RegExp or an array of either.
+ */
+export function initPolyfill(allowedOrigins) {
+  // initCSSPolyfill returns true iff the host browser supports SDA
+  if (initCSSPolyfill(allowedOrigins)) {
+    return;
+  }
+
+  if (
+    !Reflect.defineProperty(window, 'ScrollTimeline', { value: ScrollTimeline })
+  ) {
+    throw Error(
+      'Error installing ScrollTimeline polyfill: could not attach ScrollTimeline to window'
+    );
+  }
+  if (
+    !Reflect.defineProperty(window, 'ViewTimeline', { value: ViewTimeline })
+  ) {
+    throw Error(
+      'Error installing ViewTimeline polyfill: could not attach ViewTimeline to window'
+    );
+  }
+
+  if (
+    !Reflect.defineProperty(Element.prototype, 'animate', { value: animate })
+  ) {
+    throw Error(
+      "Error installing ScrollTimeline polyfill: could not attach WAAPI's animate to DOM Element"
+    );
+  }
+  if (!Reflect.defineProperty(window, 'Animation', { value: ProxyAnimation })) {
+    throw Error('Error installing Animation constructor.');
+  }
+  if (!Reflect.defineProperty(Element.prototype, "getAnimations", { value: elementGetAnimations })) {
+    throw Error(
+      "Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to DOM Element"
+    );
+  }
+  if (!Reflect.defineProperty(document, "getAnimations", { value: documentGetAnimations })) {
+    throw Error(
+      "Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to document"
+    );
+  }
+}
diff --git a/src/initialize.js b/src/initialize.js
deleted file mode 100644
index 5aa9a35..0000000
--- a/src/initialize.js
+++ /dev/null
@@ -1,76 +0,0 @@
-// Copyright 2019 Google LLC
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     https://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import {
-  ScrollTimeline,
-  ViewTimeline,
-} from "./scroll-timeline-base";
-import {
-  animate,
-  elementGetAnimations,
-  documentGetAnimations,
-  ProxyAnimation
-} from "./proxy-animation.js";
-
-import { initCSSPolyfill } from "./scroll-timeline-css"
-
-/**
- * Initializes the polyfill and by default will parse all stylesheets on the
- * page.
- * @param {'*' | string | RegExp | Array<string | RegExp>} allowedOrigins
- * Defaults to *, which attempts to parse all linked stylesheets. It also
- * accepts a string, a RegExp or an array of either.
- */
-export function initPolyfill(allowedOrigins) {
-  // initCSSPolyfill returns true iff the host browser supports SDA
-  if (initCSSPolyfill(allowedOrigins)) {
-    return;
-  }
-
-  if (
-    !Reflect.defineProperty(window, 'ScrollTimeline', { value: ScrollTimeline })
-  ) {
-    throw Error(
-      'Error installing ScrollTimeline polyfill: could not attach ScrollTimeline to window'
-    );
-  }
-  if (
-    !Reflect.defineProperty(window, 'ViewTimeline', { value: ViewTimeline })
-  ) {
-    throw Error(
-      'Error installing ViewTimeline polyfill: could not attach ViewTimeline to window'
-    );
-  }
-
-  if (
-    !Reflect.defineProperty(Element.prototype, 'animate', { value: animate })
-  ) {
-    throw Error(
-      "Error installing ScrollTimeline polyfill: could not attach WAAPI's animate to DOM Element"
-    );
-  }
-  if (!Reflect.defineProperty(window, 'Animation', { value: ProxyAnimation })) {
-    throw Error('Error installing Animation constructor.');
-  }
-  if (!Reflect.defineProperty(Element.prototype, "getAnimations", { value: elementGetAnimations })) {
-    throw Error(
-      "Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to DOM Element"
-    );
-  }
-  if (!Reflect.defineProperty(document, "getAnimations", { value: documentGetAnimations })) {
-    throw Error(
-      "Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to document"
-    );
-  }
-}
diff --git a/src/scroll-timeline-css.js b/src/scroll-timeline-css.js
index 481062c..973d104 100644
--- a/src/scroll-timeline-css.js
+++ b/src/scroll-timeline-css.js
@@ -4,6 +4,7 @@ import { ScrollTimeline, ViewTimeline, getScrollParent, calculateRange,
   calculateRelativePosition, measureSubject, measureSource } from "./scroll-timeline-base";
 
 const parser = new StyleParser();
+let hasFetchedRemoteStylesheets = false;
 
 /**
  * @param {'*' | string | RegExp | Array<string | RegExp>} allowedOrigins
@@ -84,9 +85,14 @@ function initMutationObserver(allowedOrigins) {
   }
 
   document.querySelectorAll("style").forEach((tag) => handleStyleTag(tag));
-  document
-    .querySelectorAll("link")
-    .forEach((tag) => handleLinkedStylesheet(tag));
+  if (!hasFetchedRemoteStylesheets) {
+    hasFetchedRemoteStylesheets = true;
+    Promise.resolve().then(() => {
+      document
+      .querySelectorAll("link")
+      .forEach((tag) => handleLinkedStylesheet(tag));
+    });
+  }  
 }
 
 function relativePosition(phase, container, target, axis, optionsInset, percent) {