fix(ObjectPage): slightly improve scroll performance (#4970)

This PR slightly improves the performance of the ObjectPage (a few ms).
It also refactors the Object- and DynamicPage to use logical css
properties for padding.

Fixes #4960

Author: Lukas742

packages/main/src/components/DynamicPage/DynamicPage.jss.ts

@@ -45,7 +45,7 @@ export const styles = {
   },
   contentContainer: {
     extend: ResponsiveContainerPadding,
-    paddingTop: '1rem',
+    paddingBlockStart: '1rem',
     boxSizing: 'border-box',
     width: '100%',
     height: 'auto',

packages/main/src/components/DynamicPageHeader/DynamicPageHeader.jss.ts

@@ -6,8 +6,8 @@ export const DynamicPageHeaderStyles = {
     backgroundColor: ThemingParameters.sapObjectHeader_Background,
     position: 'sticky',
     zIndex: 1,
-    paddingTop: '1rem',
-    paddingBottom: '1rem',
+    paddingBlockStart: '1rem',
+    paddingBlockEnd: '1rem',
     display: `var(${DynamicPageCssVariables.headerDisplay})`,
     overflow: 'hidden'
   }

packages/main/src/components/DynamicPageTitle/DynamicPageTitle.jss.ts

@@ -6,8 +6,8 @@ export const DynamicPageTitleStyles = {
     flex: '1 1 100%',
     backgroundColor: ThemingParameters.sapObjectHeader_Background,
     minHeight: '3rem',
-    paddingTop: '0.5rem',
-    paddingBottom: '0.5rem',
+    paddingBlockStart: '0.5rem',
+    paddingBlockEnd: '0.5rem',
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'space-between',
@@ -44,7 +44,7 @@ export const DynamicPageTitleStyles = {
     fontFamily: ThemingParameters.sapObjectHeader_Title_FontFamily,
     color: ThemingParameters.sapObjectHeader_Title_TextColor,
     fontSize: `var(${DynamicPageCssVariables.titleFontSize})`,
-    paddingTop: '0.3125rem',
+    paddingBlockStart: '0.3125rem',
     overflowWrap: 'break-word',
     hyphens: 'auto',
     '& > *': {

packages/main/src/components/ObjectPage/ObjectPage.jss.ts

@@ -82,8 +82,7 @@ export const styles = {
     zIndex: 2,
     '& [data-component-name="DynamicPageTitle"]': {
       gridColumn: 2,
-      paddingLeft: 0,
-      paddingRight: 0
+      paddingInline: 0
     },
     cursor: 'pointer'
   },
@@ -136,5 +135,6 @@ export const styles = {
     '&::part(content)': {
       padding: 0
     }
-  }
+  },
+  titleInHeader: { padding: 0 }
 };

packages/main/src/components/ObjectPage/index.tsx

@@ -555,7 +555,19 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
         threshold: [0]
       }
     );
-    // Fallback when scrolling faster than the IntersectionObserver can observe (in most cases faster than 60fps)
+
+    sections.forEach((el) => {
+      observer.observe(el);
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [children, totalHeaderHeight, setInternalSelectedSectionId, isProgrammaticallyScrolled]);
+
+  // Fallback when scrolling faster than the IntersectionObserver can observe (in most cases faster than 60fps)
+  useEffect(() => {
+    const sections = objectPageRef.current?.querySelectorAll('section[data-component-name="ObjectPageSection"]');
     if (isAfterScroll) {
       let currentSection = sections[sections.length - 1];
       let currentIndex;
@@ -582,22 +594,7 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
       }
       setIsAfterScroll(false);
     }
-
-    sections.forEach((el) => {
-      observer.observe(el);
-    });
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [
-    objectPageRef.current,
-    children,
-    totalHeaderHeight,
-    setInternalSelectedSectionId,
-    isProgrammaticallyScrolled,
-    isAfterScroll
-  ]);
+  }, [isAfterScroll]);
 
   const titleHeaderNotClickable =
     (alwaysShowContentHeader && !headerContentPinnable) ||
@@ -616,18 +613,18 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
 
   const renderTitleSection = useCallback(
     (inHeader = false) => {
-      const titleStyles = { ...(inHeader ? { padding: 0 } : {}), ...(headerTitle?.props?.style ?? {}) };
+      const titleInHeaderClass = inHeader ? classes.titleInHeader : undefined;
 
       if (headerTitle?.props && headerTitle.props?.showSubHeaderRight === undefined) {
         return cloneElement(headerTitle, {
           showSubHeaderRight: true,
-          style: titleStyles,
+          className: clsx(titleInHeaderClass, headerTitle?.props?.className),
           'data-not-clickable': titleHeaderNotClickable,
           onToggleHeaderContentVisibility: onTitleClick
         });
       }
       return cloneElement(headerTitle, {
-        style: titleStyles,
+        className: clsx(titleInHeaderClass, headerTitle?.props?.className),
         'data-not-clickable': titleHeaderNotClickable,
         onToggleHeaderContentVisibility: onTitleClick
       });