fix(viewer): avoid flicker on dropTarget=document upload box

ref #131 (comment)

Author: patrickhulce

packages/viewer/src/ui/components/report-upload-box.jsx

@@ -7,14 +7,14 @@
 import {h, Fragment} from 'preact';
 import './report-upload-box.css';
 import {LhrViewerButton} from './lhci-components';
-import {useState, useEffect} from 'preact/hooks';
+import {useState, useEffect, useRef} from 'preact/hooks';
 import clsx from 'clsx';
 
 /** @typedef {import('../app.jsx').ToastMessage} ToastMessage */
 /** @typedef {import('../app.jsx').ReportData} ReportData */
 /** @typedef {'filename'|'hostname'|'pathname'|'path'|'timestamp-hostname'|'timestamp-pathname'} DisplayType */
 /** @typedef {{variant: 'base'|'compare', displayType: DisplayType, report: ReportData|undefined, setReport: (d: ReportData) => void, addToast: (t: ToastMessage) => void, showOpenLhrLink?: boolean, dragTarget?: 'self' | 'document'}} ReportUploadBoxProps */
-/** @typedef {{isDragging: boolean, dragTarget: HTMLElement|undefined}} DragData */
+/** @typedef {HTMLElement|undefined} DragData */
 
 /** @param {string} s @return {LH.Result|Error} */
 export function parseStringAsLhr(s) {
@@ -91,60 +91,60 @@ function handleFileInput(props, fileList) {
   });
 }
 
-/** @param {ReportUploadBoxProps} props @param {DragData} dragData @param {(d: DragData) => void} setDragData @param {Event} e */
-function handleDragEnter(props, dragData, setDragData, e) {
+/** @param {ReportUploadBoxProps} props @param {import('preact/hooks').Ref<DragData>} dragTargetRef @param {(b: boolean) => void} setIsDragging @param {Event} e */
+function handleDragEnter(props, dragTargetRef, setIsDragging, e) {
   if (!(e.target instanceof HTMLElement)) return;
-  if (dragData.isDragging && dragData.dragTarget === e.target) return;
   e.stopPropagation();
   e.preventDefault();
-  setDragData({isDragging: true, dragTarget: e.target});
+  setIsDragging(true);
+  dragTargetRef.current = e.target;
 }
 
-/** @param {ReportUploadBoxProps} props @param {DragData} dragData @param {(d: DragData) => void} setDragData @param {Event} e */
-function handleDragLeave(props, dragData, setDragData, e) {
-  if (e.target !== dragData.dragTarget) return;
+/** @param {ReportUploadBoxProps} props @param {import('preact/hooks').Ref<DragData>} dragTargetRef @param {(b: boolean) => void} setIsDragging @param {Event} e */
+function handleDragLeave(props, dragTargetRef, setIsDragging, e) {
+  if (e.target !== dragTargetRef.current) return;
   e.stopPropagation();
   e.preventDefault();
-  setDragData({isDragging: false, dragTarget: undefined});
+  setIsDragging(false);
+  dragTargetRef.current = undefined;
 }
 
-/** @param {ReportUploadBoxProps} props @param {DragData} dragData @param {(d: DragData) => void} setDragData @param {Event} e */
-function handleDragOver(props, dragData, setDragData, e) {
-  if (!dragData.dragTarget) return;
+/** @param {ReportUploadBoxProps} props @param {import('preact/hooks').Ref<DragData>} dragTargetRef @param {(b: boolean) => void} setIsDragging @param {Event} e */
+function handleDragOver(props, dragTargetRef, setIsDragging, e) {
+  if (!dragTargetRef.current) return;
   e.stopPropagation();
   e.preventDefault();
 }
 
-/** @param {Pick<ReportUploadBoxProps, 'addToast'|'setReport'>} props @param {DragData} dragData @param {(d: DragData) => void} setDragData @param {Event} e */
-function handleDrop(props, dragData, setDragData, e) {
-  if (!dragData.dragTarget) return;
+/** @param {Pick<ReportUploadBoxProps, 'addToast'|'setReport'>} props @param {import('preact/hooks').Ref<DragData>} dragTargetRef @param {(b: boolean) => void} setIsDragging @param {Event} e */
+function handleDrop(props, dragTargetRef, setIsDragging, e) {
+  if (!dragTargetRef.current) return;
   if (!(e instanceof DragEvent)) return;
   if (!e.dataTransfer) return;
   e.stopPropagation();
   e.preventDefault();
-  setDragData({isDragging: false, dragTarget: undefined});
+  setIsDragging(false);
+  dragTargetRef.current = undefined;
   handleFileInput(props, e.dataTransfer.files);
 }
 
 /** @param {ReportUploadBoxProps} props */
 export const ReportUploadBox = props => {
-  const [dragData, setDragData] = useState({
-    isDragging: false,
-    dragTarget: /** @type {HTMLElement|undefined} */ (undefined),
-  });
+  const [isDragging, setIsDragging] = useState(false);
+  const dragTargetRef = useRef(/** @type {HTMLElement|undefined} */ (undefined));
+
+  /** @param {Event} e */
+  const onDragEnter = e => handleDragEnter(props, dragTargetRef, setIsDragging, e);
+  /** @param {Event} e */
+  const onDragLeave = e => handleDragLeave(props, dragTargetRef, setIsDragging, e);
+  /** @param {Event} e */
+  const onDragOver = e => handleDragOver(props, dragTargetRef, setIsDragging, e);
+  /** @param {Event} e */
+  const onDrop = e => handleDrop(props, dragTargetRef, setIsDragging, e);
 
   useEffect(() => {
     if (props.dragTarget !== 'document') return;
 
-    /** @param {Event} e */
-    const onDragEnter = e => handleDragEnter(props, dragData, setDragData, e);
-    /** @param {Event} e */
-    const onDragLeave = e => handleDragLeave(props, dragData, setDragData, e);
-    /** @param {Event} e */
-    const onDragOver = e => handleDragOver(props, dragData, setDragData, e);
-    /** @param {Event} e */
-    const onDrop = e => handleDrop(props, dragData, setDragData, e);
-
     document.addEventListener('dragenter', onDragEnter);
     document.addEventListener('dragleave', onDragLeave);
     document.addEventListener('dragover', onDragOver);
@@ -156,17 +156,18 @@ export const ReportUploadBox = props => {
       document.removeEventListener('dragover', onDragOver);
       document.removeEventListener('drop', onDrop);
     };
-  }, [props.dragTarget, props.addToast, props.setReport, dragData, setDragData]);
+  }, [props.dragTarget, props.addToast, props.setReport, dragTargetRef.current]);
 
   return (
     <div
       className={clsx(`report-upload-box report-upload-box--${props.variant}`, {
-        'report-upload-box--drop': dragData.isDragging,
+        'report-upload-box--drop': isDragging,
+        'report-upload-box--document-target': props.dragTarget === 'document',
       })}
-      onDragEnter={e => handleDragEnter(props, dragData, setDragData, e)}
-      onDragLeave={e => handleDragLeave(props, dragData, setDragData, e)}
-      onDragOver={e => handleDragOver(props, dragData, setDragData, e)}
-      onDrop={e => handleDrop(props, dragData, setDragData, e)}
+      onDragEnter={onDragEnter}
+      onDragLeave={onDragLeave}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
     >
       <div className="report-upload-box__drop-outline">Drop your report to upload</div>
       <span className="report-upload-box__label">

packages/viewer/src/ui/routes/comparison/comparison.jsx

@@ -41,6 +41,7 @@ export const ComparisonRoute = props => {
         <div className="comparison-header__upload">
           <ReportUploadBox
             variant="base"
+            dragTarget="self"
             report={props.baseReport}
             setReport={props.setBaseReport}
             addToast={props.addToast}
@@ -49,6 +50,7 @@ export const ComparisonRoute = props => {
           />
           <ReportUploadBox
             variant="compare"
+            dragTarget="self"
             report={props.compareReport}
             setReport={props.setCompareReport}
             addToast={props.addToast}