1 files changed, 26 insertions, 14 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 9d30a92b0..66a431bf0 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1364,9 +1364,10 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
     @observable public docView: DocumentViewInternal | undefined | null;
     @observable public textHtmlOverlay: Opt<string>;
+    @observable public textHtmlOverlayTime: Opt<number>;
     @observable private _isHovering = false;
 
-    public htmlOverlayEffect = '';
+    public htmlOverlayEffect: Opt<Doc>;
     public get displayName() {
         return 'DocumentView(' + this.props.Document?.title + ')';
     } // this makes mobx trace() statements more descriptive
@@ -1596,7 +1597,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     scaleToScreenSpace = () => (1 / (this.props.NativeDimScaling?.() || 1)) * this.screenToLocalTransform().Scale;
     docViewPathFunc = () => this.docViewPath;
-    isSelected = () => SelectionManager.IsSelected(this);
+    isSelected = () => this.SELECTED;
     select = (extendSelection: boolean, focusSelection?: boolean) => {
         if (this.isSelected() && SelectionManager.Views().length > 1) SelectionManager.DeselectView(this);
         else {
@@ -1643,19 +1644,30 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         Object.values(this._disposers).forEach(disposer => disposer?.());
         !BoolCast(this.props.Document.dontRegisterView, this.props.dontRegisterView) && DocumentManager.Instance.RemoveView(this);
     }
+    // want the htmloverlay to be able to fade in but we also want it to be display 'none' until it is needed.
+    // unfortunately, CSS can't transition animate any properties for something that is display 'none'.
+    // so we need to first activate the div, then, after a render timeout, start the opacity transition.
+    @observable enableHtmlOverlayTransitions: boolean = false;
     @computed get htmlOverlay() {
-        return !this.textHtmlOverlay ? null : (
-            <div className="documentView-htmlOverlay">
-                <div className="documentView-htmlOverlayInner">
-                    <Fade delay={0} duration={500}>
-                        {DocumentViewInternal.AnimationEffect(
-                            <div className="webBox-textHighlight">
-                                <ObserverJsxParser autoCloseVoidElements={true} key={42} onError={(e: any) => console.log('PARSE error', e)} renderInWrapper={false} jsx={StrCast(this.textHtmlOverlay)} />
-                            </div>,
-                            { presentation_effect: this.htmlOverlayEffect ?? 'Zoom' } as any as Doc,
-                            this.rootDoc
-                        )}{' '}
-                    </Fade>
+        const effect = StrCast(this.htmlOverlayEffect?.presentation_effect, StrCast(this.htmlOverlayEffect?.followLinkAnimEffect));
+        return (
+            <div
+                className="documentView-htmlOverlay"
+                ref={r => {
+                    const val = r?.style.display !== 'none'; // if the outer overlay has been displayed, trigger the innner div to start it's opacity fade in transition
+                    if (r && val !== this.enableHtmlOverlayTransitions) {
+                        setTimeout(action(() => (this.enableHtmlOverlayTransitions = val)));
+                    }
+                }}
+                style={{ display: !this.textHtmlOverlay ? 'none' : undefined }}>
+                <div className="documentView-htmlOverlayInner" style={{ transition: `all 500ms`, opacity: this.enableHtmlOverlayTransitions ? 0.9 : 0 }}>
+                    {DocumentViewInternal.AnimationEffect(
+                        <div className="webBox-textHighlight">
+                            <ObserverJsxParser autoCloseVoidElements={true} key={42} onError={(e: any) => console.log('PARSE error', e)} renderInWrapper={false} jsx={StrCast(this.textHtmlOverlay)} />
+                        </div>,
+                        { ...(this.htmlOverlayEffect ?? {}), presentation_effect: effect ?? PresEffect.Zoom } as any as Doc,
+                        this.rootDoc
+                    )}
                 </div>
             </div>
         );