fix: hide overlay when both hover and actions are still loading

Author: sqs

src/hoverifier.test.ts

@@ -335,7 +335,8 @@ describe('Hoverifier', () => {
         for (const codeView of testcases) {
             const scheduler = new TestScheduler((a, b) => chai.assert.deepEqual(a, b))
 
-            const delayTime = LOADER_DELAY + 100
+            const hoverDelayTime = 100
+            const actionsDelayTime = 150
             const hover = {}
             const actions = ['foo', 'bar']
 
@@ -344,8 +345,8 @@ describe('Hoverifier', () => {
                     closeButtonClicks: new Observable<MouseEvent>(),
                     hoverOverlayElements: of(null),
                     hoverOverlayRerenders: EMPTY,
-                    fetchHover: createStubHoverFetcher(hover, delayTime),
-                    fetchActions: createStubActionsFetcher(actions, delayTime),
+                    fetchHover: createStubHoverFetcher(hover, LOADER_DELAY + hoverDelayTime),
+                    fetchActions: createStubActionsFetcher(actions, LOADER_DELAY + actionsDelayTime),
                 })
 
                 const positionJumps = new Subject<PositionJump>()
@@ -370,24 +371,21 @@ describe('Hoverifier', () => {
                         actionsOrError,
                         hoverOrError,
                     })),
-                    distinctUntilChanged((a, b) => isEqual(a, b)),
-                    // For this test, filter out the intermediate emissions where exactly one of the fetchers is
-                    // loading.
-                    filter(
-                        ({ actionsOrError, hoverOrError }) =>
-                            (actionsOrError === LOADING) === (hoverOrError === LOADING)
-                    )
+                    distinctUntilChanged((a, b) => isEqual(a, b))
                 )
 
                 const inputDiagram = 'a'
 
                 // Subtract 1ms before "b" because "a" takes up 1ms.
-                const outputDiagram = `${LOADER_DELAY}ms a ${TOOLTIP_DISPLAY_DELAY - 1}ms b`
+                const outputDiagram = `${LOADER_DELAY}ms ${hoverDelayTime}ms a ${actionsDelayTime -
+                    hoverDelayTime -
+                    1}ms b`
 
                 const outputValues: {
                     [key: string]: Pick<HoverOverlayProps<{}, {}, string>, 'hoverOrError' | 'actionsOrError'>
                 } = {
-                    a: { hoverOrError: LOADING, actionsOrError: LOADING }, // actions is undefined when it is loading
+                    // No hover is shown if it would just consist of LOADING.
+                    a: { hoverOrError: createHoverAttachment(hover), actionsOrError: LOADING },
                     b: { hoverOrError: createHoverAttachment(hover), actionsOrError: actions },
                 }
 

src/hoverifier.ts

@@ -247,9 +247,16 @@ interface InternalHoverifierState<C extends object, D, A> {
 
 /**
  * Returns true if the HoverOverlay component should be rendered according to the given state.
+ *
+ * The primary purpose of this is to reduce UI jitter by not showing the overlay when there is nothing to show
+ * (because there is no content, or because it is still loading).
  */
 const shouldRenderOverlay = (state: InternalHoverifierState<{}, {}, {}>): boolean =>
-    !(!state.hoverOverlayIsFixed && state.mouseIsMoving) && !!state.hoverOrError && !isErrorLike(state.hoverOrError)
+    !(!state.hoverOverlayIsFixed && state.mouseIsMoving) &&
+    ((!!state.hoverOrError && state.hoverOrError !== LOADING) ||
+        (!!state.actionsOrError &&
+            state.actionsOrError !== LOADING &&
+            (isErrorLike(state.actionsOrError) || state.actionsOrError.length > 0)))
 
 /**
  * Maps internal HoverifierState to the publicly exposed HoverState