Merge pull request #15766 from overleaf/td-ide-page-hide-content-during-resize

React IDE page: hide editor and PDF during resize

GitOrigin-RevId: bad1a7601d1706e684c91c88c3239a6618479681

services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useRef } from 'react'
+import { ReactNode, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   ImperativePanelHandle,
@@ -25,6 +25,7 @@ export default function EditorAndPdf({
   const { t } = useTranslation()
   const { view, pdfLayout, changeLayout, detachRole, reattach } =
     useLayoutContext()
+  const [resizing, setResizing] = useState(false)
 
   const pdfPanelRef = useRef<ImperativePanelHandle>(null)
   const isDualPane = pdfLayout === 'sideBySide'
@@ -52,7 +53,10 @@ export default function EditorAndPdf({
         shouldPersistLayout ? 'ide-react-editor-and-pdf-layout' : undefined
       }
       direction="horizontal"
-      className={classnames({ hide: historyIsOpen })}
+      className={classnames('ide-react-editor-and-pdf', {
+        hide: historyIsOpen,
+        'ide-react-editor-and-pdf-resizing': resizing,
+      })}
     >
       {editorIsVisible ? (
         <Panel
@@ -61,12 +65,15 @@ export default function EditorAndPdf({
           defaultSize={50}
           className="ide-react-panel"
         >
-          {editorContent}
+          <div className="ide-react-editor-content full-size">
+            {editorContent}
+          </div>
         </Panel>
       ) : null}
       <HorizontalResizeHandle
         resizable={isDualPane}
         onDoubleClick={() => setPdfIsOpen(!pdfIsOpen)}
+        onDragging={setResizing}
       >
         <HorizontalToggler
           id="editor-pdf"
@@ -82,7 +89,7 @@ export default function EditorAndPdf({
           </div>
         ) : null}
       </HorizontalResizeHandle>
-      {pdfIsOpen ? (
+      {pdfIsOpen || resizing ? (
         <Panel
           ref={pdfPanelRef}
           id="pdf"

services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx

@@ -1,8 +1,9 @@
 import { Panel, PanelGroup } from 'react-resizable-panels'
-import { ReactNode } from 'react'
+import { ReactNode, useState } from 'react'
 import { HorizontalResizeHandle } from '../resize/horizontal-resize-handle'
 import useFixedSizeColumn from '@/features/ide-react/hooks/use-fixed-size-column'
 import useCollapsiblePanel from '@/features/ide-react/hooks/use-collapsible-panel'
+import classNames from 'classnames'
 
 const CHAT_DEFAULT_SIZE = 20
 
@@ -32,6 +33,8 @@ export default function MainLayout({
 
   useCollapsiblePanel(chatIsOpen, chatPanelRef)
 
+  const [resizing, setResizing] = useState(false)
+
   return (
     <div className="ide-react-main">
       {headerContent}
@@ -40,13 +43,16 @@ export default function MainLayout({
           autoSaveId={shouldPersistLayout ? 'ide-react-chat-layout' : undefined}
           direction="horizontal"
           onLayout={handleLayout}
+          className={classNames({
+            'ide-react-main-resizing': resizing,
+          })}
         >
           <Panel id="main" order={1}>
             {mainContent}
           </Panel>
           {chatIsOpen ? (
             <>
-              <HorizontalResizeHandle />
+              <HorizontalResizeHandle onDragging={setResizing} />
               <Panel
                 ref={chatPanelRef}
                 id="chat"

services/web/frontend/js/features/ide-react/components/layout/two-column-main-content.tsx

@@ -1,10 +1,11 @@
-import React, { ReactNode, useEffect } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
 import { Panel, PanelGroup } from 'react-resizable-panels'
 import { HorizontalResizeHandle } from '@/features/ide-react/components/resize/horizontal-resize-handle'
 import { useTranslation } from 'react-i18next'
 import { HorizontalToggler } from '@/features/ide-react/components/resize/horizontal-toggler'
 import useFixedSizeColumn from '@/features/ide-react/hooks/use-fixed-size-column'
 import useCollapsiblePanel from '@/features/ide-react/hooks/use-collapsible-panel'
+import classNames from 'classnames'
 
 type TwoColumnMainContentProps = {
   leftColumnId: string
@@ -39,6 +40,8 @@ export default function TwoColumnMainContent({
 
   useCollapsiblePanel(leftColumnIsOpen, leftColumnPanelRef)
 
+  const [resizing, setResizing] = useState(false)
+
   // Update the left column default size on unmount rather than doing it on
   // every resize, which causes ResizeObserver errors
   useEffect(() => {
@@ -54,6 +57,9 @@ export default function TwoColumnMainContent({
       }
       direction="horizontal"
       onLayout={handleLayout}
+      className={classNames({
+        'ide-react-main-content-resizing': resizing,
+      })}
     >
       <Panel
         ref={leftColumnPanelRef}
@@ -62,11 +68,12 @@ export default function TwoColumnMainContent({
         collapsible
         onCollapse={collapsed => setLeftColumnIsOpen(!collapsed)}
       >
-        {leftColumnIsOpen ? leftColumnContent : null}
+        {leftColumnContent}
       </Panel>
       <HorizontalResizeHandle
         onDoubleClick={() => setLeftColumnIsOpen(!leftColumnIsOpen)}
         resizable={leftColumnIsOpen}
+        onDragging={setResizing}
       >
         <HorizontalToggler
           id={leftColumnId}

services/web/frontend/js/features/ide-react/components/resize/horizontal-resize-handle.tsx

@@ -1,5 +1,5 @@
 import { PanelResizeHandle } from 'react-resizable-panels'
-import { FC } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PanelResizeHandleProps } from 'react-resizable-panels/dist/declarations/src/PanelResizeHandle'
 import classNames from 'classnames'
@@ -13,9 +13,30 @@ export const HorizontalResizeHandle: FC<
   HorizontalResizeHandleOwnProps & PanelResizeHandleProps
 > = ({ children, resizable = true, onDoubleClick, ...props }) => {
   const { t } = useTranslation()
+  const [isDragging, setIsDragging] = useState(false)
+
+  // Only call onDragging prop when the pointer moves after starting a drag
+  useEffect(() => {
+    if (isDragging) {
+      const handlePointerMove = () => {
+        props.onDragging?.(true)
+      }
+
+      document.addEventListener('pointermove', handlePointerMove)
+      return () => {
+        document.removeEventListener('pointermove', handlePointerMove)
+      }
+    } else {
+      props.onDragging?.(false)
+    }
+  }, [isDragging, props])
 
   return (
-    <PanelResizeHandle {...props}>
+    <PanelResizeHandle
+      disabled={!resizable && !isDragging}
+      {...props}
+      onDragging={setIsDragging}
+    >
       <div
         className={classNames('horizontal-resize-handle', {
           'horizontal-resize-handle-enabled': resizable,

services/web/frontend/stylesheets/app/editor/ide-react.less

@@ -139,3 +139,17 @@
   color: var(--neutral-20);
   height: 100%;
 }
+
+// Hide panel contents while resizing
+.ide-react-main-resizing .ide-react-editor-and-pdf,
+.ide-react-main-content-resizing .ide-react-editor-and-pdf,
+.ide-react-editor-and-pdf-resizing .ide-react-editor-content,
+.ide-react-editor-and-pdf-resizing .pdf {
+  display: none !important;
+}
+
+.ide-react-main-resizing,
+.ide-react-main-content-resizing,
+.ide-react-editor-and-pdf-resizing {
+  background-color: white;
+}