refactor: better banner logic

src/lib/components/organisms/NavBar.svelte

@@ -4,13 +4,23 @@
 	import api from '$api';
 </script>
 
-{#await api.general.ping() then apiUp}
-	{#if !apiUp}
+<!-- make the banner a snippet to remove duplicate code -->
+{#snippet apiDownBanner()}
 	<Banner level="caution" permanent>
 		The API is currently unresponsive and some services may not work correctly.
 		{#await api.general.getAbout() then data}
 			Check the <Button type="text" href={data.status}>status page</Button> for updates.
 		{/await}
 	</Banner>
+{/snippet}
+
+<div class="nav-container">
+	<!-- whether the api doesn't return 204 or the request itself fails, show banner -->
+	{#await api.general.ping() then apiUp}
+		{#if !apiUp}
+			{@render apiDownBanner()}
 		{/if}
+	{:catch _}
+		{@render apiDownBanner()}
 	{/await}
+</div>