[semver:patch] Add a loader to initial load

src/modules/document/document.ts

@@ -115,6 +115,14 @@ export function removeWidget(hostingAppWindow: Window): void {
   hostingAppWindow.document.getElementById('strigo-widget').remove();
 }
 
+export function removeLoader(): void {
+  const loader = document.getElementById('loader');
+  loader.remove();
+
+  const academyHatIcon = document.getElementById('strigo-academy-hat-icon');
+  academyHatIcon.classList.remove('loader');
+}
+
 export function openWidget(): void {
   const widget = document.getElementById('strigo-widget');
   widget.classList.add('slide-in');
@@ -191,11 +199,16 @@ export function createWidget(url: string): HTMLIFrameElement {
   };
 
   const academyHatIcon = document.createElement('div');
-  academyHatIcon.className = 'strigo-academy-hat-icon';
+  academyHatIcon.className = 'strigo-academy-hat-icon loader';
   academyHatIcon.id = 'strigo-academy-hat-icon';
   academyHatIcon.innerHTML = ACADEMY_HAT;
   academyHatDiv.appendChild(academyHatIcon);
 
+  const loaderElement = document.createElement('div');
+  loaderElement.className = 'loader';
+  loaderElement.id = 'loader';
+  academyHatDiv.appendChild(loaderElement);
+
   // Create collapse div
   const collapseDiv = document.createElement('div');
   collapseDiv.className = 'strigo-collapse-div';

src/modules/listeners/listeners.ts

@@ -48,6 +48,8 @@ function onHostEventHandler(ev: MessageEvent<any>): void {
 
     case MessageTypes.RENDERED: {
       Logger.info('Panel rendered message received');
+      sessionManager.setSessionValue('isRendered', true);
+
       window.Strigo?.expandPanel();
 
       break;

src/modules/session/session.types.ts

@@ -5,4 +5,5 @@ export interface StrigoSession {
   isLoading?: boolean;
   widgetFlavor: WidgetFlavors;
   isRecordingMode?: boolean;
+  isRendered: boolean;
 }

src/strigo/index.ts

@@ -8,7 +8,7 @@ import * as widgetFactory from '../modules/widgets/widget-factory';
 import { MessageTypes } from '../modules/listeners/listeners.types';
 import { DockingSide, User } from '../modules/config/config.types';
 import { getElementSelection } from '../modules/element-selector/element-selector';
-import { customizeHatColors } from '../modules/document/document';
+import { customizeHatColors, removeLoader } from '../modules/document/document';
 import { setupUrlTriggers } from '../modules/url-trigger/url-trigger';
 import { getLocalStorageConfig } from '../modules/config/config';
 
@@ -183,6 +183,7 @@ class StrigoSDK implements IStrigoSDK {
         currentUrl: config.initSite.href,
         shouldPanelBeOpen: sessionManager.shouldPanelBeOpen(),
         isLoading: true,
+        isRendered: false,
         widgetFlavor: config.selectedWidgetFlavor,
       });
 
@@ -201,6 +202,10 @@ class StrigoSDK implements IStrigoSDK {
 
     const widget = widgetFactory.getWidget(config.selectedWidgetFlavor);
     widget.open();
+
+    if (sessionManager.getSessionValue('isRendered')) {
+      removeLoader();
+    }
   }
 
   collapse(): void {

src/styles/strigo-academy-hat.scss

@@ -3,6 +3,27 @@
   --customizable-hat-bg-hover-color: #696cbf;
   --customizable-hat-text-color: #e2e2e7;
 }
+
+.loader {
+  width: 12px;
+  height: 12px;
+  border: 2px solid #fff;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 0.6s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .strigo-academy-hat {
   position: fixed;
   top: 50%;
@@ -58,5 +79,9 @@
     width: 16px;
     padding-top: 1px;
     fill: var(--customizable-hat-text-color);
+
+    &.loader {
+      display: none;
+    }
   }
 }