Revert "[BD-8573][BpkCarousel][BpkMobileScrollContainer] Resolve forc…

…e reflow…" (#3554) This reverts commit 78bcf0b.
Skyscanner · Jul 24, 2024 · 480daca · 480daca
1 parent 211b5aa
commit 480daca
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 59 deletions.
diff --git a/packages/bpk-component-carousel/src/utils.test.tsx b/packages/bpk-component-carousel/src/utils.test.tsx
diff --git a/packages/bpk-component-carousel/src/utils.tsx b/packages/bpk-component-carousel/src/utils.tsx
@@ -25,27 +25,15 @@ export function useScrollToInitialImage(
   initialImageIndex: number,
   imagesRef: MutableRefObject<Array<HTMLElement | null>>,
 ) {
-  const handleIntersecting = (index: number) => {
-    const element = imagesRef.current[index];
+  useEffect(() => {
+    const element = imagesRef.current[initialImageIndex];
     if (element) {
       element.scrollIntoView({
         block: 'nearest',
         inline: 'start',
       });
     }
-  };
-
-  const observe = useIntersectionObserver(handleIntersecting, {
-    root: null,
-    threshold: 0.1,
-  });
-
-  useEffect(() => {
-    const element = imagesRef.current[initialImageIndex];
-    if (element) {
-      observe(element);
-    }
-  }, [initialImageIndex, imagesRef, observe]);
+  }, [initialImageIndex, imagesRef]);
 }
 
 export function useIntersectionObserver(

diff --git a/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js b/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js
@@ -140,38 +140,35 @@ class BpkMobileScrollContainer extends Component<Props, State> {
   }, 100);
 
   setScrollIndicatorClassName = () => {
-    requestAnimationFrame(() => {
-      const classNames = computeScrollIndicatorClassName(
-        this.scrollerEl,
-        this.props.leadingIndicatorClassName,
-        this.props.trailingIndicatorClassName,
-      );
-
-      if (!classNames) {
-        return;
-      }
-
-      this.setState(() => ({
-        scrollIndicatorClassName: classNames.join(' '),
-      }));
-    });
+    const classNames = computeScrollIndicatorClassName(
+      this.scrollerEl,
+      this.props.leadingIndicatorClassName,
+      this.props.trailingIndicatorClassName,
+    );
+
+    if (!classNames) {
+      return;
+    }
+
+    this.setState(() => ({
+      scrollIndicatorClassName: classNames.join(' '),
+    }));
   };
 
   setScrollBarAwareHeight = () => {
     if (this.props.showScrollbar) {
       return;
     }
-    requestAnimationFrame(() => {
-      const computedHeight = computeScrollBarAwareHeight(
-        this.scrollerEl,
-        this.innerEl,
-      );
-
-      if (!computedHeight) {
-        return;
-      }
-      this.setState(() => ({ computedHeight }));
-    });
+    const computedHeight = computeScrollBarAwareHeight(
+      this.scrollerEl,
+      this.innerEl,
+    );
+
+    if (!computedHeight) {
+      return;
+    }
+
+    this.setState(() => ({ computedHeight }));
   };
 
   render() {