perf: Move to passive scroll listeners where supported

app/components/Header.tsx

@@ -10,6 +10,7 @@ import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
+import { supportsPassiveListener } from "~/utils/browser";
 
 type Props = {
   breadcrumb?: React.ReactNode;
@@ -33,7 +34,11 @@ function Header({ breadcrumb, title, actions, hasSidebar }: Props) {
   );
 
   React.useEffect(() => {
-    window.addEventListener("scroll", handleScroll);
+    window.addEventListener(
+      "scroll",
+      handleScroll,
+      supportsPassiveListener ? { passive: true } : false
+    );
     return () => window.removeEventListener("scroll", handleScroll);
   }, [handleScroll]);
 

app/hooks/useWindowScrollPosition.ts

@@ -2,22 +2,7 @@
 // maintained.
 import { throttle } from "lodash";
 import { useState, useEffect } from "react";
-
-let supportsPassive = false;
-
-try {
-  const opts = Object.defineProperty({}, "passive", {
-    get: function () {
-      supportsPassive = true;
-    },
-  });
-  // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-  window.addEventListener("testPassive", null, opts);
-  // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-  window.removeEventListener("testPassive", null, opts);
-} catch (e) {
-  // No-op
-}
+import { supportsPassiveListener } from "~/utils/browser";
 
 const getPosition = () => ({
   x: window.pageXOffset,
@@ -44,7 +29,7 @@ export default function useWindowScrollPosition(options: {
     window.addEventListener(
       "scroll",
       handleScroll,
-      supportsPassive
+      supportsPassiveListener
         ? {
             passive: true,
           }

app/scenes/Document/components/MultiplayerEditor.tsx

@@ -15,6 +15,7 @@ import usePageVisibility from "~/hooks/usePageVisibility";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 import MultiplayerExtension from "~/multiplayer/MultiplayerExtension";
+import { supportsPassiveListener } from "~/utils/browser";
 import { homePath } from "~/utils/routeHelpers";
 
 type Props = EditorProps & {
@@ -76,7 +77,7 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
         "scrollY",
         window.scrollY / window.innerHeight
       );
-    }, 200);
+    }, 250);
 
     const finishObserving = () => {
       if (ui.observingUserId) {
@@ -86,7 +87,11 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
 
     window.addEventListener("click", finishObserving);
     window.addEventListener("wheel", finishObserving);
-    window.addEventListener("scroll", syncScrollPosition);
+    window.addEventListener(
+      "scroll",
+      syncScrollPosition,
+      supportsPassiveListener ? { passive: true } : false
+    );
 
     provider.on("authenticationFailed", () => {
       showToast(

app/utils/browser.ts

@@ -15,3 +15,24 @@ export function isMac(): boolean {
   const SSR = typeof window === "undefined";
   return !SSR && window.navigator.platform === "MacIntel";
 }
+
+let supportsPassive = false;
+
+try {
+  const opts = Object.defineProperty({}, "passive", {
+    get: function () {
+      supportsPassive = true;
+    },
+  });
+  // @ts-expect-error ts-migrate(2769) testPassive is not a real event
+  window.addEventListener("testPassive", null, opts);
+  // @ts-expect-error ts-migrate(2769) testPassive is not a real event
+  window.removeEventListener("testPassive", null, opts);
+} catch (e) {
+  // No-op
+}
+
+/**
+ * Returns true if the client supports passive event listeners
+ */
+export const supportsPassiveListener = supportsPassive;