immich-app/data.immich.app
1
0
Fork 0
mirror of https://github.com/immich-app/data.immich.app.git synced 2026-09-30 13:23:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: loading spinners

Browse Source
This commit is contained in:
Jason Rasmussen
2025-06-24 17:25:49 -04:00
parent 1bf3d5ccae
commit d16fa39158
2 changed files with 85 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/+page.svelte
+85 -54
View File
@@ -1,8 +1,19 @@
<script lang="ts"> <script lang="ts">
import '$lib/app.css'; import '$lib/app.css';
import GithubGraph from '$lib/components/graphs/github-graph.svelte'; import GithubGraph from '$lib/components/graphs/github-graph.svelte';
import { githubData } from '$lib/services/api.svelte'; import { githubData, loadGithubData } from '$lib/services/api.svelte';
import { Card, CardBody, CardHeader, CardTitle, Container, Heading, HStack, Icon, Text } from '@immich/ui'; import {
Card,
CardBody,
CardHeader,
CardTitle,
Container,
Heading,
HStack,
Icon,
LoadingSpinner,
Text,
} from '@immich/ui';
import { mdiBugOutline, mdiMessageOutline, mdiSourceBranch, mdiStarOutline } from '@mdi/js'; import { mdiBugOutline, mdiMessageOutline, mdiSourceBranch, mdiStarOutline } from '@mdi/js';
import uPlot from 'uplot'; import uPlot from 'uplot';
import 'uplot/dist/uPlot.min.css'; import 'uplot/dist/uPlot.min.css';
@@ -17,6 +28,8 @@
key: 'sync', key: 'sync',
}, },
}; };
const loading = loadGithubData();
</script> </script>
<Container size="giant" center> <Container size="giant" center>
@@ -25,57 +38,75 @@
</Heading> </Heading>
<Text color="muted">immich-app/immich</Text> <Text color="muted">immich-app/immich</Text>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-8">
<Card> {#await loading}
<CardHeader> {#each [1, 2, 3, 4] as _}
<CardTitle> <Card class="animate-pulse">
<HStack> <CardBody>
<Icon icon={mdiStarOutline} /> <div class="h-32 flex items-center justify-center">
Stars <LoadingSpinner size="large" />
</HStack> </div>
</CardTitle> </CardBody>
</CardHeader> </Card>
<CardBody> {/each}
<GithubGraph color="yellow" id="stars-chart" data={githubData.stars} {cursorOpts} label="Stars" /> {:then}
</CardBody> <Card>
</Card> <CardHeader>
<Card> <CardTitle>
<CardHeader> <HStack>
<CardTitle> <Icon icon={mdiStarOutline} />
<HStack> Stars
<Icon icon={mdiBugOutline} /> </HStack>
<span>Issues</span> </CardTitle>
</HStack> </CardHeader>
</CardTitle> <CardBody>
</CardHeader> <GithubGraph color="yellow" id="stars-chart" data={githubData.stars} {cursorOpts} label="Stars" />
<CardBody> </CardBody>
<GithubGraph color="blue" id="issues-chart" data={githubData.issues} {cursorOpts} label="Issues" /> </Card>
</CardBody> <Card>
</Card> <CardHeader>
<Card> <CardTitle>
<CardHeader> <HStack>
<CardTitle> <Icon icon={mdiBugOutline} />
<HStack> <span>Issues</span>
<Icon icon={mdiSourceBranch} /> </HStack>
<span>Open Pull Requests</span> </CardTitle>
</HStack> </CardHeader>
</CardTitle> <CardBody>
</CardHeader> <GithubGraph color="blue" id="issues-chart" data={githubData.issues} {cursorOpts} label="Issues" />
<CardBody> </CardBody>
<GithubGraph color="green" id="pull-requests-chart" data={githubData.pullRequests} {cursorOpts} label="PR" /> </Card>
</CardBody> <Card>
</Card> <CardHeader>
<Card> <CardTitle>
<CardHeader> <HStack>
<CardTitle> <Icon icon={mdiSourceBranch} />
<HStack> <span>Open Pull Requests</span>
<Icon icon={mdiMessageOutline} /> </HStack>
<span>Total Discussions</span> </CardTitle>
</HStack> </CardHeader>
</CardTitle> <CardBody>
</CardHeader> <GithubGraph color="green" id="pull-requests-chart" data={githubData.pullRequests} {cursorOpts} label="PR" />
<CardBody> </CardBody>
<GithubGraph color="purple" id="discussions-chart" data={githubData.discussions} {cursorOpts} label="Topics" /> </Card>
</CardBody> <Card>
</Card> <CardHeader>
<CardTitle>
<HStack>
<Icon icon={mdiMessageOutline} />
<span>Total Discussions</span>
</HStack>
</CardTitle>
</CardHeader>
<CardBody>
<GithubGraph
color="purple"
id="discussions-chart"
data={githubData.discussions}
{cursorOpts}
label="Topics"
/>
</CardBody>
</Card>
{/await}
</div> </div>
</Container> </Container>
frontend/src/routes/+page.ts
-9
View File
@@ -1,9 +0,0 @@
import { loadGithubData } from '$lib/services/api.svelte';
export const ssr = false;
export const load = async () => {
await loadGithubData();
return {};
};