From 5b0b41e5896f16d94e154802568492b11865d670 Mon Sep 17 00:00:00 2001
From: Alvaro Ramirez <alvaroramirezcastillo@gmail.com>
Date: Wed, 17 May 2023 21:27:11 -0500
Subject: [PATCH] An additional property was added to the
 WebComponentWrapperOptions type to allow for tracking the loading states of
 the micro frontend.

---
 .../src/lib/web-components/web-component-wrapper.ts    | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/libs/mf-tools/src/lib/web-components/web-component-wrapper.ts b/libs/mf-tools/src/lib/web-components/web-component-wrapper.ts
index bbe1261d..98c0cdd1 100644
--- a/libs/mf-tools/src/lib/web-components/web-component-wrapper.ts
+++ b/libs/mf-tools/src/lib/web-components/web-component-wrapper.ts
@@ -12,8 +12,15 @@ import {
   loadRemoteModule,
 } from '@angular-architects/module-federation';
 
+export interface MicroFrontendLoadStatusHandler {
+  onLoadStart(): void;
+  onLoadSuccess(): void;
+  onLoadError(): void;
+}
+
 export type WebComponentWrapperOptions = LoadRemoteModuleOptions & {
   elementName: string;
+  microFrontendLoadStatusHandler?: MicroFrontendLoadStatusHandler;
 };
 
 @Component({
@@ -57,6 +64,7 @@ export class WebComponentWrapper implements AfterContentInit, OnChanges {
       this.options ?? (this.route.snapshot.data as WebComponentWrapperOptions);
 
     try {
+      options.microFrontendLoadStatusHandler?.onLoadStart();
       await loadRemoteModule(options);
 
       this.element = document.createElement(options.elementName);
@@ -64,8 +72,10 @@ export class WebComponentWrapper implements AfterContentInit, OnChanges {
       this.setupEvents();
 
       this.vc.nativeElement.appendChild(this.element);
+      options.microFrontendLoadStatusHandler?.onLoadSuccess();
     } catch (error) {
       console.error(error);
+      options.microFrontendLoadStatusHandler?.onLoadError();
     }
   }
 }