Refactor last group padding logic into a custom hook

- toggling the item [Fragment] make stutter as the calculated bottom height changes
- on group, move the logic responsible for height calculation to a hook

Author: robertpiosik

packages/ui/src/components/editor/settings/Group/Group.tsx

@@ -1,9 +1,6 @@
-import { useEffect, useRef, useState } from 'react'
 import styles from './Group.module.scss'
-import {
-  GROUP_TITLE_HEIGHT,
-  SECTION_HEADER_HEIGHT
-} from '../../../../constants/sizes'
+import { use_last_group_padding } from './use-last-group-padding'
+import { GROUP_TITLE_HEIGHT } from '../../../../constants/sizes'
 
 type Props = {
   children: React.ReactNode
@@ -12,35 +9,10 @@ type Props = {
 }
 
 export const Group: React.FC<Props> = (props) => {
-  const ref = useRef<HTMLDivElement>(null)
-  const [height, setHeight] = useState<number>(0)
-
-  useEffect(() => {
-    if (!props.is_last || !ref.current) return
-
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0]
-      if (entry) {
-        setHeight(entry.contentRect.height)
-      }
-    })
-
-    observer.observe(ref.current)
-    return () => observer.disconnect()
-  }, [props.is_last])
+  const ref = use_last_group_padding(props.is_last)
 
   return (
-    <div
-      ref={ref}
-      className={props.title ? styles.wrapper : undefined}
-      style={
-        props.is_last && height > 0
-          ? {
-              paddingBottom: `calc(100vh - ${height}px - ${SECTION_HEADER_HEIGHT}px)`
-            }
-          : undefined
-      }
-    >
+    <div ref={ref} className={props.title ? styles.wrapper : undefined}>
       {props.title && (
         <div className={styles.title} style={{ height: GROUP_TITLE_HEIGHT }}>
           {props.title}

packages/ui/src/components/editor/settings/Group/use-last-group-padding.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react'
+import { SECTION_HEADER_HEIGHT } from '../../../../constants/sizes'
+
+export const use_last_group_padding = (is_last?: boolean) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!is_last || !ref.current) {
+      if (ref.current) {
+        ref.current.style.paddingBottom = ''
+      }
+      return
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (entry && ref.current) {
+        ref.current.style.paddingBottom = `calc(100vh - ${entry.contentRect.height}px - ${SECTION_HEADER_HEIGHT}px)`
+      }
+    })
+
+    observer.observe(ref.current)
+    return () => {
+      observer.disconnect()
+      if (ref.current) ref.current.style.paddingBottom = ''
+    }
+  }, [is_last])
+
+  return ref
+}

packages/ui/src/components/editor/settings/Layout/Layout.tsx

@@ -25,4 +25,5 @@ export const Layout = forwardRef<HTMLDivElement, Props>((props, ref) => {
     </div>
   )
 })
+
 Layout.displayName = 'Layout'