realtime supabase data

Posts.svelte

<script>
	import { supabase } from '$lib/database';
	import { readable, get } from 'svelte/store';
	const posts = readable(null, (set) => {
		supabase
			.from('posts')
			.select('*')
			.then(({ data }) => set(data));
		const subscriptions = supabase
			.from('posts')
			.on('*', (payload) => {
				if (payload.eventType === 'INSERT') {
					set([...get(posts), payload.new]);
				}
			})
			.subscribe();

		return () => {
			supabase.removeSubscription(subscriptions);
		};
	});
</script>

<main>
	{#if $posts}
		{#each $posts as { title, featured }}
			{#if featured === false}
				<li><a class="h6" style="color: cornflowerblue" href="/posts/{title}">{title}</a></li>
			{/if}
		{:else}
			<p>No posts atm</p>
		{/each}
	{:else}
		<div class="d-flex justify-content-center">
			<div class="spinner-border" role="status">
				<span class="visually-hidden">Loading...</span>
			</div>
			<span>&nbsp; Waiting on posts</span>
		</div>
	{/if}
</main>