From 9d8b21edc06e858226411bf06921e9ee7e9986d7 Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Wed, 15 Nov 2023 11:55:05 +0000
Subject: [PATCH] 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
---
 .../ide-react/components/editor-and-pdf.tsx   | 15 ++++++++---
 .../components/layout/main-layout.tsx         | 10 ++++++--
 .../layout/two-column-main-content.tsx        | 11 ++++++--
 .../resize/horizontal-resize-handle.tsx       | 25 +++++++++++++++++--
 .../stylesheets/app/editor/ide-react.less     | 14 +++++++++++
 5 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx b/services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx
index 32d9a7aeb9..34f0492861 100644
--- a/services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx
+++ b/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"
diff --git a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
index 045d0f27cf..92d05e6811 100644
--- a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
+++ b/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"
diff --git a/services/web/frontend/js/features/ide-react/components/layout/two-column-main-content.tsx b/services/web/frontend/js/features/ide-react/components/layout/two-column-main-content.tsx
index f1f0c0e071..8d89d24799 100644
--- a/services/web/frontend/js/features/ide-react/components/layout/two-column-main-content.tsx
+++ b/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}
diff --git a/services/web/frontend/js/features/ide-react/components/resize/horizontal-resize-handle.tsx b/services/web/frontend/js/features/ide-react/components/resize/horizontal-resize-handle.tsx
index a592bd5ec7..5834e444b7 100644
--- a/services/web/frontend/js/features/ide-react/components/resize/horizontal-resize-handle.tsx
+++ b/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,
diff --git a/services/web/frontend/stylesheets/app/editor/ide-react.less b/services/web/frontend/stylesheets/app/editor/ide-react.less
index a7e3e6caa5..f1095cd9bc 100644
--- a/services/web/frontend/stylesheets/app/editor/ide-react.less
+++ b/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;
+}