<template>
	<div class="simplestats-dashboard-empty">
		<EmptyHeroCard v-if="hasResponded" />
		<img
			class="simplestats-dashboard-empty__skeleton"
			:src="statsSkeletonSrc"
			alt=""
			role="presentation"
		/>
		<img
			class="simplestats-dashboard-empty__skeleton"
			:src="chartSkeletonSrc"
			alt=""
			role="presentation"
		/>
	</div>
</template>

<script setup>
	import { computed } from 'vue';
	import { useStore } from '@/dashboard/store.js';
	import EmptyHeroCard from './EmptyHeroCard.vue';
	import statsSkeletonSrc from '@/images/dashboard-stats-skeleton.svg';
	import chartSkeletonSrc from '@/images/dashboard-chart-skeleton.svg';

	const store = useStore();

	// Keep the "waiting for your first visitor" hero hidden until the report
	// request has settled — while it's in flight we only show the skeletons so
	// the user knows something is loading.
	const hasResponded = computed(
		() => ! store.report.isLoading && ( store.report.loaded || Boolean( store.report.error ) )
	);
</script>
