From 391d0a0bfe8fe3b24f9eb68222a5302d0834e7eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Sun, 27 Oct 2024 10:20:49 +0100
Subject: [PATCH] remove flickering in divider

---
 shared/naturalcrit/splitPane/splitPane.jsx  | 9 ++++-----
 shared/naturalcrit/splitPane/splitPane.less | 2 +-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx
index 4def5b9fc..1500c759f 100644
--- a/shared/naturalcrit/splitPane/splitPane.jsx
+++ b/shared/naturalcrit/splitPane/splitPane.jsx
@@ -17,7 +17,6 @@ const SplitPane = (props)=>{
 	const [showMoveArrows, setShowMoveArrows] = useState(true);
 	const [liveScroll, setLiveScroll] = useState(false);
 
-	// Set initial divider position and liveScroll only after mounting
 	useEffect(()=>{
 		const savedPos = window.localStorage.getItem(storageKey);
 		setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2);
@@ -29,6 +28,7 @@ const SplitPane = (props)=>{
 
 	const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x)));
 
+	//when resizing, the divider should grow smaller if less space is given, then grow back if the space is restored, to the original position
 	const handleResize = () =>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
 	
 	const handleUp =(e)=>{
@@ -48,8 +48,7 @@ const SplitPane = (props)=>{
 	const handleMove = (e)=>{
 		if(!isDragging) return;
 		e.preventDefault();
-		const newSize = limitPosition(e.pageX);
-		setDividerPos(newSize);
+		setDividerPos(limitPosition(e.pageX));
 	};
 
 	const liveScrollToggle = ()=>{
@@ -75,7 +74,7 @@ const SplitPane = (props)=>{
 	);
 
 	const renderDivider = (
-		<div className='divider' onPointerDown={handleDown}>
+		<div className={`divider ${isDragging && 'dragging'}`} onPointerDown={handleDown}>
 			{showDividerButtons && renderMoveArrows}
 			<div className='dots'>
 				<i className='fas fa-circle' />
@@ -84,7 +83,7 @@ const SplitPane = (props)=>{
 			</div>
 		</div>
 	);
-	
+
 	return (
 		<div className='splitPane' onPointerMove={handleMove} onPointerUp={handleUp}>
 			<Pane width={dividerPos} moveBrew={moveBrew} moveSource={moveSource} liveScroll={liveScroll} setMoveArrows={setShowMoveArrows}>
diff --git a/shared/naturalcrit/splitPane/splitPane.less b/shared/naturalcrit/splitPane/splitPane.less
index 66e47ef23..8b61097be 100644
--- a/shared/naturalcrit/splitPane/splitPane.less
+++ b/shared/naturalcrit/splitPane/splitPane.less
@@ -30,7 +30,7 @@
 				color     : #666666;
 			}
 		}
-		&:hover { background-color : #999999; }
+		&:hover,&.dragging { background-color : #999999; }
 	}
 	.arrow {
 		position         : absolute;