From 2190833c6565329e0f9b7f73f991b31b1114123f Mon Sep 17 00:00:00 2001
From: Imbus <imbus64@protonmail.com>
Date: Mon, 13 Nov 2023 12:10:40 +0100
Subject: [PATCH] Slight restructure and breakout of loadingspinner animation

---
 client-solid/src/Icons.tsx      |  4 ++++
 client-solid/src/Posts.tsx      | 11 ++++-------
 client-solid/src/SinglePost.tsx |  3 ++-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/client-solid/src/Icons.tsx b/client-solid/src/Icons.tsx
index 9384b96..851b47c 100644
--- a/client-solid/src/Icons.tsx
+++ b/client-solid/src/Icons.tsx
@@ -17,3 +17,7 @@ export function Arrow(): JSXElement {
     </svg>
   );
 }
+
+export function loadSpinner(): JSXElement {
+  return <span class="loading loading-spinner loading-lg self-center"></span>;
+}
diff --git a/client-solid/src/Posts.tsx b/client-solid/src/Posts.tsx
index 6f7d099..12d59fe 100644
--- a/client-solid/src/Posts.tsx
+++ b/client-solid/src/Posts.tsx
@@ -1,8 +1,9 @@
-import { JSXElement, createSignal } from "solid-js";
+import { JSXElement, Show, createSignal } from "solid-js";
 import { getPosts } from "./api";
 import { Post } from "./api";
 import { useNavigate } from "@solidjs/router";
 import { Arrow } from "./Icons";
+import { loadSpinner } from "./Icons";
 
 export function Posts(): JSXElement {
   const [posts, setPosts] = createSignal([] as Post[]);
@@ -14,15 +15,11 @@ export function Posts(): JSXElement {
   });
 
   return (
-    <>
-      {loading() && (
-        <span class="loading loading-spinner loading-lg self-center"></span>
-      )}
+    <Show when={!loading()} fallback={loadSpinner()}>
       {posts().map((post) => {
-        if (post.content == "") return; // Filtering out empty posts, remove this later
         return <PostSegment post={post}></PostSegment>;
       })}
-    </>
+    </Show>
   );
 }
 
diff --git a/client-solid/src/SinglePost.tsx b/client-solid/src/SinglePost.tsx
index 828a0da..e274fd0 100644
--- a/client-solid/src/SinglePost.tsx
+++ b/client-solid/src/SinglePost.tsx
@@ -2,13 +2,14 @@ import { useParams } from "@solidjs/router";
 import { JSXElement, Show, Suspense, createResource } from "solid-js";
 import { getPost } from "./api";
 import { PostSegment } from "./Posts";
+import { loadSpinner } from "./Icons";
 
 export function SinglePost(): JSXElement {
   const params = useParams();
   const [post] = createResource(params.postid, getPost);
 
   return (
-    <Suspense fallback={<div>Some loading message</div>}>
+    <Suspense fallback={loadSpinner()}>
         <Show when={post()}>
           <PostSegment post={post()!}></PostSegment>
         </Show>