Added a pulsing animation after dismissing the PEP modal

libs/features/webapp-prompt/focus-animation.css

@@ -0,0 +1,63 @@
+:root {
+  --blue-700: rgba(56,146,243);
+  --coach-indicator-ring-default-color:var(--blue-700);
+  --coach-indicator-ring-diameter:1.25rem;
+  --coach-indicator-ring-default-color:var(--blue-700);
+	--coach-indicator-ring-border-size: 2px;
+	--coach-indicator-ring-inline-size: var(--coach-indicator-ring-diameter);
+	--coach-indicator-ring-block-size: var(--coach-indicator-ring-diameter);
+  --animation-duration: 3000ms;
+}
+
+@keyframes pulse {
+	0% {
+		transform: scale(0.8);
+		opacity: 0;
+	}
+
+	50% {
+		transform: scale(1.5);
+		opacity: 1;
+	}
+
+	100% {
+		transform: scale(2);
+		opacity: 0;
+	}
+}
+
+.coach-indicator-ring {
+	display: block;
+	position: absolute;
+  top: 14%;
+  left: 13%;
+
+	border-style: solid;
+	border-width: var(--coach-indicator-ring-border-size);
+	border-color: var(--coach-indicator-ring-default-color);
+
+	inline-size: var(--coach-indicator-ring-inline-size);
+	block-size: var(--coach-indicator-ring-block-size);
+	animation: pulse var(--animation-duration) linear;
+  animation-fill-mode: both;
+
+  border-radius: 0.313rem;
+}
+
+.coach-indicator-ring:nth-child(1) {
+  animation-delay: calc(var(--animation-duration)*(0));
+}
+
+.coach-indicator-ring:nth-child(2) {
+  animation-delay: calc(var(--animation-duration)*(0.33));
+}
+
+.coach-indicator-ring:nth-child(3) {
+  animation-delay: calc(var(--animation-duration)*(0.66));
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.coach-indicator-ring {
+		animation: none;
+	}
+}

libs/features/webapp-prompt/webapp-prompt.js

@@ -5,7 +5,7 @@ import {
   lanaLog,
   toFragment,
 } from '../../blocks/global-navigation/utilities/utilities.js';
-import { getConfig, decorateSVG } from '../../utils/utils.js';
+import { getConfig, decorateSVG, loadStyle } from '../../utils/utils.js';
 import { replaceKey, replaceText } from '../placeholders.js';
 
 const CONFIG = {
@@ -35,6 +35,31 @@ const getIcon = (content) => {
   return icons.company;
 };
 
+const showTooltip = (message, time) => {
+  console.log(message);
+  console.log(time);
+};
+
+const playFocusAnimation = (element, iterationCount = 2, animationDuration = 2500) => {
+  const rings = [];
+  for (let i = 0; i < 3; i += 1) {
+    const ring = document.createElement('div');
+    ring.classList.add('coach-indicator-ring');
+    element.insertAdjacentElement('afterbegin', ring);
+    document.documentElement.style.setProperty('--animation-duration', `${animationDuration}ms`);
+    ring.style.animationIterationCount = `${iterationCount}`;
+    rings.push(ring);
+  }
+  // The cleanup function is added to the event queue
+  // half a second after the end of the animation because
+  // the cleanup isn't high priority but it should be done
+  // eventually. (Animation truly ends slightly after
+  // animationDuration * iterationCount due to animation-delay)
+  setTimeout(() => {
+    rings.forEach((ring) => ring.remove());
+  }, (iterationCount + 1) * animationDuration);
+};
+
 class AppPrompt {
   constructor({ promptPath, entName, parent, getAnchorState } = {}) {
     this.promptPath = promptPath;
@@ -70,6 +95,9 @@ class AppPrompt {
       }));
     if (this.isAnchorExpanded) return;
 
+    // load animation css
+    await loadStyle('/libs/features/webapp-prompt/focus-animation.css');
+
     if (this.anchorId) this.anchor = document.querySelector(`#${this.anchorId}`);
     this.offset = this.anchor
       ? this.parent.offsetWidth - (this.anchor.offsetWidth + this.anchor.offsetLeft) : 0;
@@ -213,6 +241,10 @@ class AppPrompt {
     document.removeEventListener('keydown', this.handleKeyDown);
     this.anchor?.focus();
     this.anchor?.removeEventListener('click', this.close);
+
+    window.testAnimation = (n, t = 3000) => playFocusAnimation(document.querySelector('#unav-app-switcher'), n, t);
+    playFocusAnimation(document.querySelector('#unav-app-switcher'), 2, 1000);
+    showTooltip('', 0);
   };
 
   static getDismissedPrompts = () => {