yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Clan-app: Add loading animations & improve async data handling

Browse Source
This commit is contained in:
Johannes Kirschbauer
2024-08-06 22:29:11 +02:00
parent ec16059abc
commit e69d6b22f0
10 changed files with 203 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
pkgs/webview-ui/app/src/layout/header.tsx
View File

@@ -1,7 +1,7 @@
import { createQuery } from "@tanstack/solid-query";
import { activeURI, setRoute } from "../App";
import { callApi } from "../api";
import { Accessor, createEffect, Show } from "solid-js";
import { Accessor, Show } from "solid-js";
interface HeaderProps {
clan_dir: Accessor<string | null>;
@@ -34,7 +34,14 @@ export const Header = (props: HeaderProps) => {
</span>
</div>
<div class="flex-1">
<Show when={!query.isFetching && query.data}>
<Show when={query.isLoading && !query.data}>
<div class="skeleton mx-4 size-11 rounded-full"></div>
<span class="flex flex-col gap-2">
<div class="skeleton h-3 w-32"></div>
<div class="skeleton h-3 w-40"></div>
</span>
</Show>
<Show when={query.data}>
{(meta) => (
<div class="tooltip tooltip-right" data-tip={activeURI()}>
<div class="avatar placeholder online mx-4">
@@ -46,7 +53,7 @@ export const Header = (props: HeaderProps) => {
)}
</Show>
<span class="flex flex-col">
<Show when={!query.isFetching && query.data}>
<Show when={query.data}>
{(meta) => [
<span class="text-primary">{meta().name}</span>,
<span class="text-neutral">{meta()?.description}</span>,