ENG-1766 Fix suggestive mode reflow on first panel open and close (#1049)

* ENG-1766 Fix suggestive mode reflow on first panel open and close

Two fixes for the visible width animation when toggling the suggestive
mode sidebar at small/medium/large spacing modes:

- Use useLayoutEffect for setupSplitView so the flex layout and
  article wrapper width override land before the browser paints.
  Avoids the intermediate frame where the panel sits as a block
  sibling and the wrapper is at default width.
- Suppress CSS transitions on .rm-article-wrapper during setup and
  teardown via a new applyWithoutTransition helper, then restore on
  the next frame. Roam's stylesheet animates padding/max-width on
  spacing changes; the same transition fired when we wrote our
  overrides.

Also adds a 1.5rem gap on .roam-body-main so the wrapper does not
butt against the panel.

* Use tailwind classes for split-view flex/gap

Author: sid597

apps/roam/src/components/PanelManager.tsx

@@ -1,4 +1,10 @@
-import React, { useEffect, useState, useRef, useCallback } from "react";
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useState,
+  useRef,
+  useCallback,
+} from "react";
 import ReactDOM from "react-dom";
 import { Navbar, Alignment, Button } from "@blueprintjs/core";
 import { OnloadArgs } from "roamjs-components/types/native";
@@ -94,7 +100,7 @@ export const PanelContainer = (): React.ReactElement => {
 
   const [isMinimized, setIsMinimized] = useState(getGlobalIsMinimized());
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const { roamBodyMain, articleWrapper } = getRoamElements();
 
     if (roamBodyMain && articleWrapper && containerRef.current) {

apps/roam/src/utils/suggestiveModeSidebarSizing.ts

@@ -84,13 +84,35 @@ export const cleanupArticleWrapperObserver = (): void => {
     articleWrapperObserver = null;
   }
 };
+const applyWithoutTransition = (
+  element: HTMLElement,
+  apply: () => void,
+): void => {
+  const previousValue = element.style.getPropertyValue("transition");
+  const previousPriority = element.style.getPropertyPriority("transition");
+  element.style.setProperty("transition", "none", "important");
+
+  apply();
+
+  requestAnimationFrame(() => {
+    if (previousValue) {
+      element.style.setProperty("transition", previousValue, previousPriority);
+    } else {
+      element.style.removeProperty("transition");
+    }
+  });
+};
+
 export const setupSplitView = (
   roamBodyMain: HTMLElement,
   articleWrapper: HTMLElement,
 ): void => {
-  roamBodyMain.style.display = "flex";
-  roamBodyMain.dataset.isSplit = "true";
-  updateArticleWrapperPadding(articleWrapper);
+  applyWithoutTransition(articleWrapper, () => {
+    roamBodyMain.classList.add("flex", "gap-6");
+    roamBodyMain.dataset.isSplit = "true";
+    updateArticleWrapperPadding(articleWrapper);
+  });
+
   cleanupArticleWrapperObserver();
   initializeArticleWrapperObserver();
 };
@@ -99,8 +121,10 @@ export const teardownSplitView = (
   roamBodyMain: HTMLElement,
   articleWrapper: HTMLElement,
 ): void => {
-  roamBodyMain.removeAttribute("data-is-split");
-  roamBodyMain.style.display = "";
-  articleWrapper.style.flex = "";
-  resetArticleWrapperPadding(articleWrapper);
+  applyWithoutTransition(articleWrapper, () => {
+    roamBodyMain.removeAttribute("data-is-split");
+    roamBodyMain.classList.remove("flex", "gap-6");
+    articleWrapper.style.flex = "";
+    resetArticleWrapperPadding(articleWrapper);
+  });
 };