X-Git-Url: https://git.r.bdr.sh/rbdr/forum/blobdiff_plain/bd8e98d7e24c4dbaee7db6ec7955f7c2f6d396a6..58f7d52150456713d3132408668a92d0f6f3d084:/src/components/forum_list/forum_list.svelte

diff --git a/src/components/forum_list/forum_list.svelte b/src/components/forum_list/forum_list.svelte
index 174ae25..7bfb7b2 100644
--- a/src/components/forum_list/forum_list.svelte
+++ b/src/components/forum_list/forum_list.svelte
@@ -1,52 +1,56 @@
 <script>
-  import { _ } from 'svelte-i18n';
-  import { forums } from '../../stores/forums.js';
-  import ErrorBlock from '../error_block/error_block.svelte';
+	import { _ } from 'svelte-i18n';
+	import { forums } from '$/stores/forums';
+	import Loader from '$/components/loader/loader.svelte';
+	import ErrorBlock from '$/components/error_block/error_block.svelte';
 </script>
 
-<nav title="{$_('forum_list.title')}">
-  {#if !$forums.length}
-    <ErrorBlock message={$_('forum_list.error.unavailable')} />
-  {/if}
-  <ul>
-    {#each $forums as forum}
-      <li>
-        <a href="/f/{forum.id}">
-          <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
-          <span class="navigation-label">{$_(forum.label)}</span>
-        </a>
-      </li>
-    {/each}
-  </ul>
+<nav title={$_('forum_list.title')}>
+	{#if $forums.loading}
+		<Loader />
+	{/if}
+	{#if $forums.error}
+		<ErrorBlock message={$_('forum_list.error.unavailable')} />
+	{/if}
+	<ul>
+		{#each $forums.data as forum}
+			<li>
+				<a href="/f/{forum.id}">
+					<span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
+					<span class="navigation-label">{$_(forum.label)}</span>
+				</a>
+			</li>
+		{/each}
+	</ul>
 </nav>
 
 <style>
-  nav {
-    grid-column: col-start 1;
-    grid-row: 2;
-    border-right: 1px solid black;
-  }
+	nav {
+		grid-column: col-start 1;
+		grid-row: 2;
+		border-right: 1px solid black;
+	}
 
-  ul {
-    padding: 0;
-  }
+	ul {
+		padding: 0;
+	}
 
-  li {
-    display: block;
-    text-align: left;
-    margin-bottom: 20px;
-  }
+	li {
+		display: block;
+		text-align: left;
+		margin-bottom: 20px;
+	}
 
-  .navigation-glyph {
-    font-size: 1.5rem;
-    display: block;
-  }
+	.navigation-glyph {
+		font-size: 1.5rem;
+		display: block;
+	}
 
-  .☽ {
-    font-size: 2rem;
-  }
+	.☽ {
+		font-size: 2rem;
+	}
 
-  a {
-    text-decoration: none;
-  }
+	a {
+		text-decoration: none;
+	}
 </style>