<!-- HIDDEN_TAB -->
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
  const { createApp, ref, defineAsyncComponent } = Vue;

  // 서버에서 아주 무거운 파일을 받아오는 상황을 시뮬레이션
  const loadHeavyChart = () => {
    return new Promise((resolve) => {
      console.log("네트워크: 대용량 컴포넌트 다운로드 시작... (2초 소요)");
      setTimeout(() => {
        console.log("네트워크: 다운로드 완료!");
        resolve({
          template: '<div class="chart-box">📊 대규모 데이터 차트 렌더링 완료! (15MB)</div>'
        });
      }, 2000);
    });
  };

  const AsyncHeavyChart = defineAsyncComponent({
    loader: loadHeavyChart,
    // 로딩 중일 때 보여줄 임시 컴포넌트
    loadingComponent: {
      template: '<div class="loading-box">⏳ 열심히 다운로드 중입니다... 잠시만 기다려주세요!</div>'
    },
    delay: 200 // 0.2초 이상 지연될 때만 로딩 컴포넌트 표시
  });

  const App = {
    components: { AsyncHeavyChart },
    template: `
      <div class="card">
        <h2>성능 최적화: 비동기 컴포넌트</h2>
        <p style="color: #94a3b8; margin-bottom: 20px;">
          버튼을 누르기 전까지는 무거운 차트 컴포넌트를 로드하지 않습니다.<br/>
          (F12 개발자 도구의 Network 탭 효과를 콘솔에서 확인하세요!)
        </p>
        
        <button class="btn" @click="showChart = true" v-if="!showChart">
          무거운 차트 컴포넌트 로드하기
        </button>
        
        <!-- 사용자가 버튼을 클릭하면 그때서야 비동기 컴포넌트가 마운트(다운로드)를 시작합니다. -->
        <AsyncHeavyChart v-if="showChart" />
      </div>
    `,
    setup() {
      const showChart = ref(false);
      return { showChart };
    }
  };

  createApp(App).mount('#app');
</script>