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">
import '$lib/app.css';
import GithubGraph from '$lib/components/graphs/github-graph.svelte';
import { githubData } from '$lib/services/api.svelte';
import { Card, CardBody, CardHeader, CardTitle, Container, Heading, HStack, Icon, Text } from '@immich/ui';
import { githubData, loadGithubData } from '$lib/services/api.svelte';
import {
Card,
CardBody,
CardHeader,
CardTitle,
Container,
Heading,
HStack,
Icon,
LoadingSpinner,
Text,
} from '@immich/ui';
import { mdiBugOutline, mdiMessageOutline, mdiSourceBranch, mdiStarOutline } from '@mdi/js';
import uPlot from 'uplot';
import 'uplot/dist/uPlot.min.css';
@@ -17,6 +28,8 @@
key: 'sync',
},
};
const loading = loadGithubData();
</script>
<Container size="giant" center>
@@ -25,57 +38,75 @@
</Heading>
<Text color="muted">immich-app/immich</Text>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-8">
<Card>
<CardHeader>
<CardTitle>
<HStack>
<Icon icon={mdiStarOutline} />
Stars
</HStack>
</CardTitle>
</CardHeader>
<CardBody>
<GithubGraph color="yellow" id="stars-chart" data={githubData.stars} {cursorOpts} label="Stars" />
</CardBody>
</Card>
<Card>
<CardHeader>
<CardTitle>
<HStack>
<Icon icon={mdiBugOutline} />
<span>Issues</span>
</HStack>
</CardTitle>
</CardHeader>
<CardBody>
<GithubGraph color="blue" id="issues-chart" data={githubData.issues} {cursorOpts} label="Issues" />
</CardBody>
</Card>
<Card>
<CardHeader>
<CardTitle>
<HStack>
<Icon icon={mdiSourceBranch} />
<span>Open Pull Requests</span>
</HStack>
</CardTitle>
</CardHeader>
<CardBody>
<GithubGraph color="green" id="pull-requests-chart" data={githubData.pullRequests} {cursorOpts} label="PR" />
</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 loading}
{#each [1, 2, 3, 4] as _}
<Card class="animate-pulse">
<CardBody>
<div class="h-32 flex items-center justify-center">
<LoadingSpinner size="large" />
</div>
</CardBody>
</Card>
{/each}
{:then}
<Card>
<CardHeader>
<CardTitle>
<HStack>
<Icon icon={mdiStarOutline} />
Stars
</HStack>
</CardTitle>
</CardHeader>
<CardBody>
<GithubGraph color="yellow" id="stars-chart" data={githubData.stars} {cursorOpts} label="Stars" />
</CardBody>
</Card>
<Card>
<CardHeader>
<CardTitle>
<HStack>
<Icon icon={mdiBugOutline} />
<span>Issues</span>
</HStack>
</CardTitle>
</CardHeader>
<CardBody>
<GithubGraph color="blue" id="issues-chart" data={githubData.issues} {cursorOpts} label="Issues" />
</CardBody>
</Card>
<Card>
<CardHeader>
<CardTitle>
<HStack>
<Icon icon={mdiSourceBranch} />
<span>Open Pull Requests</span>
</HStack>
</CardTitle>
</CardHeader>
<CardBody>
<GithubGraph color="green" id="pull-requests-chart" data={githubData.pullRequests} {cursorOpts} label="PR" />
</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>
</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 {};
};