idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-25 17:59:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

enhancement(web): stats and releases pretty loading (#731)

Browse source 
* enhancement(web): improved loading message

* dark mode fix

* added skeleton for loading

* placeholder

* handle activitytable loading

* name StatsItems in isLoading

* handling ReleaseTable loading

* made releasetable 10 rows while loading

* derp

* style: simplify loading state

---------

Co-authored-by: soup <soup@r4tio.cat>
Co-authored-by: ze0s <ze0s@riseup.net>
This commit is contained in:
soup 2023-03-04 23:45:43 +01:00 • committed by GitHub
parent 65f51da68e
commit d172e70046
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 174 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

20
web/src/screens/dashboard/Stats.tsx
View file

@ -1,12 +1,14 @@
import { useQuery } from "react-query";
import { APIClient } from "../../api/APIClient";
import { classNames } from "../../utils";
interface StatsItemProps {
name: string;
value?: number;
placeholder?: string;
}
const StatsItem = ({ name, value }: StatsItemProps) => (
const StatsItem = ({ name, placeholder, value }: StatsItemProps) => (
<div
className="relative px-4 py-5 overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800"
title="All time"
@ -15,6 +17,10 @@ const StatsItem = ({ name, value }: StatsItemProps) => (
<p className="pb-1 text-sm font-medium text-gray-500 truncate">{name}</p>
</dt>
<dd className="flex items-baseline">
<p className="text-3xl font-extrabold text-gray-900 dark:text-gray-200">{placeholder}</p>
</dd>
<dd className="flex items-baseline">
<p className="text-3xl font-extrabold text-gray-900 dark:text-gray-200">{value}</p>
</dd>
@ -28,20 +34,16 @@ export const Stats = () => {
{ refetchOnWindowFocus: false }
);
if (isLoading)
return null;
return (
<div>
<h1 className="text-3xl font-bold text-black dark:text-white">
Stats
</h1>
<dl className="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-2 lg:grid-cols-3">
<StatsItem name="Filtered Releases" value={data?.filtered_count} />
<dl className={classNames("grid grid-cols-1 gap-5 mt-5 sm:grid-cols-2 lg:grid-cols-3", isLoading ? "animate-pulse" : "")}>
<StatsItem name="Filtered Releases" value={data?.filtered_count ?? 0} />
{/* <StatsItem name="Filter Rejected Releases" stat={data?.filter_rejected_count} /> */}
<StatsItem name="Rejected Pushes" value={data?.push_rejected_count} />
<StatsItem name="Approved Pushes" value={data?.push_approved_count} />
<StatsItem name="Rejected Pushes" value={data?.push_rejected_count ?? 0 } />
<StatsItem name="Approved Pushes" value={data?.push_approved_count ?? 0} />
</dl>
</div>
);