Move lottie zap animation to a specialized component

src/components/Layout/Layout.tsx

@@ -14,6 +14,7 @@ import { SendNoteResult } from '../../types/primal';
 import { useProfileContext } from '../../contexts/ProfileContext';
 import Branding from '../Branding/Branding';
 import BannerIOS, { isIOS } from '../BannerIOS/BannerIOS';
+import ZapAnimation from '../ZapAnimation/ZapAnimation';
 
 export const [isHome, setIsHome] = createSignal(false);
 
@@ -87,14 +88,7 @@ const Layout: Component = () => {
         <div class="zap_icon_fill"></div>
         <div class="like_icon"></div>
         <div class="like_icon_fill"></div>
-        <lottie-player
-          src={zapSM}
-          speed="1"
-        ></lottie-player>
-        <lottie-player
-          src={zapMD}
-          speed="1"
-        ></lottie-player>
+        <ZapAnimation src={zapMD} />
       </div>
       <div id="modal" class={styles.modal}></div>
       <BannerIOS />

src/components/Note/NoteFooter/NoteFooter.tsx

@@ -18,6 +18,7 @@ import PrimalMenu from '../../PrimalMenu/PrimalMenu';
 import { hookForDev } from '../../../lib/devTools';
 import NoteContextMenu from '../NoteContextMenu';
 import { getScreenCordinates } from '../../../utils';
+import ZapAnimation from '../../ZapAnimation/ZapAnimation';
 
 const NoteFooter: Component<{ note: PrimalNote, id?: string }> = (props) => {
 
@@ -336,13 +337,12 @@ const NoteFooter: Component<{ note: PrimalNote, id?: string }> = (props) => {
     <div id={props.id} class={styles.footer} ref={footerDiv}>
 
       <Show when={showZapAnim()}>
-        <lottie-player
+        <ZapAnimation
           id={`note-med-zap-${props.note.post.id}`}
           src={zapMD}
-          speed="1"
           class={styles.mediumZapLottie}
           ref={medZapAnimation}
-        ></lottie-player>
+        />
       </Show>
 
       {actionButton({

src/components/ZapAnimation/ZapAnimation.tsx

@@ -0,0 +1,24 @@
+import { Component } from 'solid-js';
+
+const ZapAnimation: Component<{
+  id?: string,
+  class?: string,
+  src: any,
+  ref?: HTMLElement | undefined,
+}> = (props) => {
+
+  return (
+    // @ts-ignore
+    <lottie-player
+      id={props.id}
+      src={props.src}
+      speed="1"
+      class={props.class}
+      ref={props.ref}
+    >
+    {/* @ts-ignore */}
+    </lottie-player>
+  );
+}
+
+export default ZapAnimation;