From 2bc2ae9254ba0da5f197ba6dfc04c6b4fecf3a08 Mon Sep 17 00:00:00 2001
From: rortan134 <samaritanojr006@gmail.com>
Date: Sun, 5 May 2024 17:03:23 +0200
Subject: [PATCH] perf: batch style updates

---
 src/helpers.ts            |  4 ++--
 src/use-position-fixed.ts | 27 +++++++++++++--------------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/helpers.ts b/src/helpers.ts
index c008d6ee..8c2fa3b7 100644
--- a/src/helpers.ts
+++ b/src/helpers.ts
@@ -20,8 +20,8 @@ export function isInView(el: HTMLElement): boolean {
   );
 }
 
-export function set(el?: Element | HTMLElement | null, styles?: Style, ignoreCache = false) {
-  if (!el || !(el instanceof HTMLElement) || !styles) return;
+export function set(el: Element | HTMLElement | null | undefined, styles: Style, ignoreCache = false) {
+  if (!el || !(el instanceof HTMLElement)) return;
   let originalStyles: Style = {};
 
   Object.entries(styles).forEach(([key, value]: [string, string]) => {
diff --git a/src/use-position-fixed.ts b/src/use-position-fixed.ts
index f2ad8fa3..18b22a94 100644
--- a/src/use-position-fixed.ts
+++ b/src/use-position-fixed.ts
@@ -15,7 +15,7 @@ export function usePositionFixed({
   hasBeenOpened: boolean;
   preventScrollRestoration: boolean;
 }) {
-  const [activeUrl, setActiveUrl] = React.useState(typeof window !== 'undefined' ? window.location.href : '');
+  const [activeUrl, setActiveUrl] = React.useState(() => (typeof window !== 'undefined' ? window.location.href : ''));
   const scrollPos = React.useRef(0);
 
   const setPositionFixed = React.useCallback(() => {
@@ -26,20 +26,23 @@ export function usePositionFixed({
         top: document.body.style.top,
         left: document.body.style.left,
         height: document.body.style.height,
+        right: 'unset',
       };
 
       // Update the dom inside an animation frame
       const { scrollX, innerHeight } = window;
 
       document.body.style.setProperty('position', 'fixed', 'important');
-      document.body.style.top = `${-scrollPos.current}px`;
-      document.body.style.left = `${-scrollX}px`;
-      document.body.style.right = '0px';
-      document.body.style.height = 'auto';
+      Object.assign(document.body.style, {
+        top: `${-scrollPos.current}px`,
+        left: `${-scrollX}px`,
+        right: '0px',
+        height: 'auto',
+      });
 
-      setTimeout(
+      window.setTimeout(
         () =>
-          requestAnimationFrame(() => {
+          window.requestAnimationFrame(() => {
             // Attempt to check if the bottom bar appeared due to the position change
             const bottomBarHeight = innerHeight - window.innerHeight;
             if (bottomBarHeight && scrollPos.current >= innerHeight) {
@@ -59,13 +62,9 @@ export function usePositionFixed({
       const x = -parseInt(document.body.style.left, 10);
 
       // Restore styles
-      document.body.style.position = previousBodyPosition.position;
-      document.body.style.top = previousBodyPosition.top;
-      document.body.style.left = previousBodyPosition.left;
-      document.body.style.height = previousBodyPosition.height;
-      document.body.style.right = 'unset';
+      Object.assign(document.body.style, previousBodyPosition);
 
-      requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
         if (preventScrollRestoration && activeUrl !== window.location.href) {
           setActiveUrl(window.location.href);
           return;
@@ -101,7 +100,7 @@ export function usePositionFixed({
       !isStandalone && setPositionFixed();
 
       if (!modal) {
-        setTimeout(() => {
+        window.setTimeout(() => {
           restorePositionSetting();
         }, 500);
       }