Merge pull request #17579 from opf/bug/59879-user-hovercard-rendering…

…-is-bumpy

[#59879] make user hover card animation less bumpy

frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.html

@@ -7,12 +7,5 @@
     loading="lazy"
     id="op-hover-card-body"
     [src]="turboFrameSrc">
-    <op-content-loader
-      viewBox="0 0 330 60"
-    >
-      <svg:rect x="10" y="0" width="60%" height="16" rx="1" />
-      <svg:rect x="10" y="20" width="80%" height="16" rx="1" />
-      <svg:rect x="10" y="40" width="30%" height="16" rx="1" />
-    </op-content-loader>
   </turbo-frame>
 </div>

frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.sass

@@ -7,7 +7,7 @@
     opacity: 1
 
 .op-hover-card
-  animation: fade-in-hover-card .25s ease-in-out
+  animation: fade-in-hover-card .25s ease-in
   position: absolute
   background-color: var(--body-background)
   z-index: 5000

frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.ts

@@ -58,10 +58,18 @@ export class HoverCardComponent extends OpModalComponent implements OnInit {
   @ViewChild('turboFrame')
   set turboFrame(frame:ElementRef<HTMLIFrameElement>|undefined) {
     if (frame !== undefined) {
+      // When a new turbo frame is set, hide the modal until the frame is loaded.
+      // Since the size of the new content is unknown in advance, showing a loading indicator within the hover card
+      // leads to a bumpy result once the actual content is inserted and the card extends its dimensions.
+      this.setOpacity(this.elementRef, 0);
+
       frame.nativeElement?.addEventListener('turbo:frame-load', () => {
         const modal = this.elementRef.nativeElement as HTMLElement;
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-explicit-any
         void this.reposition(modal, this.locals.event.target as HTMLElement);
+
+        // Content has been loaded, card has been positioned. Show it!
+        this.setOpacity(this.elementRef, 1);
       });
     }
   }
@@ -107,4 +115,10 @@ export class HoverCardComponent extends OpModalComponent implements OnInit {
       top: `${y}px`,
     });
   }
+
+  private setOpacity(elementRef:ElementRef, opacity:number) {
+    const element = elementRef.nativeElement as HTMLElement;
+
+    element.style.opacity = opacity.toString();
+  }
 }