{#if state === STATES.ERROR}
  <slot name="error"/>
{:elseif state === STATES.LOADING}
  <slot name="loading"/>
{:elseif state === STATES.SUCCESS && component}
  {#if hasSuccessSlot}
    <slot name="success"/>
  {:else}
    <svelte:component this={component}/>
  {/if}
{/if}

<script>
  const STATES = Object.freeze({
    INITIALIZED: 0,
    LOADING: 1,
    SUCCESS: 2,
    ERROR: 3,
  })

  export default {
    data() {
      return {
        loader: null,
        component: null,
        error: null,
        state: STATES.INITIALIZED,
        STATES,
      }
    },
    oncreate() {
      if (!this.options.data) {
        return console.error('[svelte-loadable] No data passed to <Loadable/>')
      }

      if (this.options.slots && this.options.slots.success) {
        this.set({ hasSuccessSlot: true })
      }

      this.load()
    },
    methods: {
      load() {
        const { loader, delay } = this.get()
        if (typeof loader === 'function') {
          const loadTimeout = setTimeout(() => {
            this.set({
              state: STATES.LOADING,
              error: null,
              component: null,
            })
          }, parseFloat(delay))

          loader()
            .then(componentModule => {
              this.set({
                state: STATES.SUCCESS,
                component: componentModule.default || componentModule,
              })
              clearTimeout(loadTimeout)
            })
            .catch(e => {
              this.set({
                state: STATES.ERROR,
                error: e,
              })
              clearTimeout(loadTimeout)
            })
        }
      },
    },
  }
</script>