feat(pie-lottie-player): DSW-2365 make it async!

feat(pie-lottie-player): DSW-2365 fix async issues

packages/components/pie-lottie-player/src/index.ts

@@ -1,8 +1,6 @@
 import { LitElement, PropertyValues, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
-// @ts-expect-error - Type is defined below
-import lottieLight from 'lottie-web/build/player/esm/lottie_light_canvas.min.js';
-import Lottie, { AnimationItem } from 'lottie-web';
+import { LottiePlayer, AnimationItem } from 'lottie-web';
 
 import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import { LottiePlayerProps, defaultProps, AnimationDirection } from './defs';
@@ -12,9 +10,6 @@ export * from './defs';
 
 const componentSelector = 'pie-lottie-player';
 
-// Use type assertion to assign the LottiePlayer type to the lottie import
-const lottie = lottieLight as typeof Lottie;
-
 /**
  * @tagname pie-lottie-player
  */
@@ -24,31 +19,44 @@ export class PieLottiePlayer extends LitElement implements LottiePlayerProps {
 
     private animationInstance?: AnimationItem;
 
+    private _lottie?:LottiePlayer;
     private _disableAutoPlay = defaultProps.disableAutoPlay;
     private _disableLoop = defaultProps.disableLoop;
     private _speed = defaultProps.speed;
     private _direction = defaultProps.direction;
     private _animationSrc = '';
     private _animationData?:object;
 
-    protected firstUpdated (_changedProperties: PropertyValues): void {
-        this._loadAnimation();
+    protected async firstUpdated (_changedProperties: PropertyValues): Promise<void> {
+        // Check if the code is running in a browser environment
+        if (this.canUseDOM()) {
+            // TODO: Solve TS issue
+            const asyncLottieModule = await import('lottie-web/build/player/esm/lottie_light_canvas.min.js'); // Dynamically import the 'lottie-web' library to avoid SSR issues
+            this._lottie = asyncLottieModule.default;
+            this._loadAnimation();
+        }
     }
 
     disconnectedCallback () {
         super.disconnectedCallback();
         this._destroyAnimation();
     }
 
+    private canUseDOM () {
+        return typeof window !== 'undefined' && 'document' in window && 'createElement' in window.document;
+    }
+
     private _loadAnimation (): void {
+        if (!this.canUseDOM()) return;
         if (!this.hostElement) return;
+        if (!this._lottie) return;
 
         this._destroyAnimation();
 
         if (!this.animationSrc && !this.animationData) return;
 
         try {
-            this.animationInstance = lottie.loadAnimation({
+            this.animationInstance = this._lottie.loadAnimation({
                 container: this.hostElement, // the dom element that will contain the animation
                 renderer: 'canvas',
                 loop: !this.disableLoop,