<script setup lang="ts">
  import { onBeforeMount, ref, shallowRef } from 'vue';
  import { Spin } from 'ant-design-vue';
  import { NodeItemConfigType } from '../../../types/node';
  import { fetchNodeExtraContent } from '../../../packages';

  const props = defineProps<{
    config?: NodeItemConfigType;
    nodeProps?: NodeProps;
  }>();

  const spinning = ref(false);

  const shallowComponent = shallowRef();

  onBeforeMount(async () => {
    spinning.value = true;
    const path = await fetchNodeExtraContent(props.config!);
    if (!path) spinning.value = false;
    const instance = await path?.();
    instance?.default && (shallowComponent.value = instance?.default);
    spinning.value = false;
  });
</script>

<template>
  <Spin :spinning="spinning" class="w-full h-full">
    <component :is="shallowComponent" :nodeProps="nodeProps" />
  </Spin>
</template>