Slight restructure and breakout of loadingspinner animation

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>;
+}

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 (
-    <>
+    <Show when={!loading()} fallback={loadSpinner()}>
-      {loading() && (
-        <span class="loading loading-spinner loading-lg self-center"></span>
-      )}
       {posts().map((post) => {
-        if (post.content == "") return; // Filtering out empty posts, remove this later
         return <PostSegment post={post}></PostSegment>;
       })}
-    </>
+    </Show>
   );
 }
 

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>