<script>
import VisibilityGuard from './VisibilityGuard.svelte';
const images = new Array(100).fill(null).map((n, i) => [
Math.floor(Math.random() * 500),
Math.floor(Math.random() * 750)
]);
</script>
{#each images as [x, y]}
<VisibilityGuard let:hasBeenVisible>
<div style="border: 1px solid black; min-height: 40px; min-width: 40px; padding: 5px; border-radius: 5px; margin-bottom: 5px;">
<header>I am {hasBeenVisible ? 'visible' : 'invisible'}</header>
<img src={hasBeenVisible ? `https://placekitten.com/${x}/${y}` : null} alt="a kitten" />
</div>
</VisibilityGuard>
{/each}