Imbus/FrostByte
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Slight restructure and breakout of loadingspinner animation

Browse source
This commit is contained in:
Imbus 2023-11-13 12:10:40 +01:00
parent d3a10b062d
commit 2190833c65
3 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client-solid/src/Icons.tsx
View file

@ -17,3 +17,7 @@ export function Arrow(): JSXElement {
</svg>
);
}
export function loadSpinner(): JSXElement {
return <span class="loading loading-spinner loading-lg self-center"></span>;
}

11
client-solid/src/Posts.tsx
View file

@ -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>
);
}

3
client-solid/src/SinglePost.tsx
View file

@ -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>