1  <script context="module" lang="ts">
 2      export const LOADER_TYPE = {
 3          LAZY: 'LAZY',
 4          NONE: 'NONE',
 5      } as const;
 6  </script>
 7  
 8  <script lang="ts">
 9      import LazyLoader from '@amp/web-app-components/src/components/Artwork/loaders/LazyLoader.svelte';
10      import NoLoader from '@amp/web-app-components/src/components/Artwork/loaders/NoLoader.svelte';
11      import { shouldUseLazyLoader } from '@amp/web-app-components/src/components/Artwork/constants';
12      import type { ValueOf } from '@amp/web-app-components/src/types';
13      import type { SvelteComponent } from 'svelte';
14  
15      type LoaderOptions = ValueOf<typeof LOADER_TYPE>;
16  
17      export let loaderType: LoaderOptions = LOADER_TYPE.LAZY;
18  
19      interface LoaderComponent extends SvelteComponent {
20          onSlotMount: (component: Element) => void;
21      }
22  
23      let currentComponent: LoaderComponent;
24  
25      export function onSlotMount(component: Element) {
26          currentComponent.onSlotMount(component);
27      }
28  </script>
29  
30  {#if loaderType === LOADER_TYPE.LAZY && shouldUseLazyLoader}
31      <LazyLoader bind:this={currentComponent} let:isVisible
32          ><slot {isVisible} /></LazyLoader
33      >
34  {:else}
35      <NoLoader bind:this={currentComponent} let:isVisible
36          ><slot {isVisible} /></NoLoader
37      >
38  {/if}