zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(dashboard): remove loading state when we already have some data

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-09-20 15:01:08 +02:00
parent 49a020009f
commit 0959ede055
10 changed files with 50 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/dashboard/src/components/report-chart/area/index.tsx
View File

@@ -15,7 +15,11 @@ export function ReportAreaChart() {
staleTime: 1000 * 60 * 1,
});
if (isLazyLoading || res.isLoading || res.isFetching) {
if (
isLazyLoading ||
res.isLoading ||
(res.isFetching && !res.data?.series.length)
) {
return <Loading />;
}

6
apps/dashboard/src/components/report-chart/bar/index.tsx
View File

@@ -14,7 +14,11 @@ export function ReportBarChart() {
staleTime: 1000 * 60 * 1,
});
if (isLazyLoading || res.isLoading || res.isFetching) {
if (
isLazyLoading ||
res.isLoading ||
(res.isFetching && !res.data?.series.length)
) {
return <Loading />;
}

10
apps/dashboard/src/components/report-chart/funnel/chart.tsx
View File

@@ -98,7 +98,7 @@ export function Chart({
>
<div
className={cn(
'bg-def-400 w-full',
'bg-foreground w-full',
step.event.id === mostDropoffs.event.id && 'bg-rose-500',
)}
style={{ height: `${step.percent}%` }}
@@ -236,7 +236,13 @@ export function Chart({
</div>
<Progress
size="lg"
className="w-full @2xl:w-1/2 text-white bg-def-200 mt-0.5 dark:text-black"
className={cn(
'w-full @2xl:w-1/2 text-white bg-def-200 mt-0.5 dark:text-black',
)}
innerClassName={cn(
'bg-primary',
step.event.id === mostDropoffs.event.id && 'bg-rose-500',
)}
value={percent}
/>
</div>

2
apps/dashboard/src/components/report-chart/funnel/index.tsx
View File

@@ -31,7 +31,7 @@ export function ReportFunnelChart() {
keepPreviousData: true,
});
if (isLazyLoading || res.isLoading || res.isFetching) {
if (isLazyLoading || res.isLoading) {
return <Loading />;
}

6
apps/dashboard/src/components/report-chart/histogram/index.tsx
View File

@@ -15,7 +15,11 @@ export function ReportHistogramChart() {
staleTime: 1000 * 60 * 1,
});
if (isLazyLoading || res.isLoading || res.isFetching) {
if (
isLazyLoading ||
res.isLoading ||
(res.isFetching && !res.data?.series.length)
) {
return <Loading />;
}

6
apps/dashboard/src/components/report-chart/line/index.tsx
View File

@@ -15,7 +15,11 @@ export function ReportLineChart() {
staleTime: 1000 * 60 * 1,
});
if (isLazyLoading || res.isLoading || res.isFetching) {
if (
isLazyLoading ||
res.isLoading ||
(res.isFetching && !res.data?.series.length)
) {
return <Loading />;
}

6
apps/dashboard/src/components/report-chart/map/index.tsx
View File

@@ -15,7 +15,11 @@ export function ReportMapChart() {
staleTime: 1000 * 60 * 1,
});
if (isLazyLoading || res.isLoading || res.isFetching) {
if (
isLazyLoading ||
res.isLoading ||
(res.isFetching && !res.data?.series.length)
) {
return <Loading />;
}

6
apps/dashboard/src/components/report-chart/metric/index.tsx
View File

@@ -11,7 +11,11 @@ export function ReportMetricChart() {
staleTime: 1000 * 60 * 1,
});
if (isLazyLoading || res.isLoading || res.isFetching) {
if (
isLazyLoading ||
res.isLoading ||
(res.isFetching && !res.data?.series.length)
) {
return <Loading />;
}

6
apps/dashboard/src/components/report-chart/pie/index.tsx
View File

@@ -15,7 +15,11 @@ export function ReportPieChart() {
staleTime: 1000 * 60 * 1,
});
if (isLazyLoading || res.isLoading || res.isFetching) {
if (
isLazyLoading ||
res.isLoading ||
(res.isFetching && !res.data?.series.length)
) {
return <Loading />;
}

8
apps/dashboard/src/components/ui/progress.tsx
View File

@@ -7,8 +7,9 @@ const Progress = React.forwardRef<
React.ElementRef<typeof ProgressPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
size?: 'sm' | 'default' | 'lg';
innerClassName?: string;
}
>(({ className, value, size = 'default', ...props }, ref) => (
>(({ className, innerClassName, value, size = 'default', ...props }, ref) => (
<ProgressPrimitive.Root
ref={ref}
className={cn(
@@ -20,7 +21,10 @@ const Progress = React.forwardRef<
{...props}
>
<ProgressPrimitive.Indicator
className={'h-full w-full flex-1 rounded bg-primary transition-all'}
className={cn(
'h-full w-full flex-1 rounded bg-primary transition-all',
innerClassName,
)}
style={{
transform: `translateX(-${100 - (value || 0)}%)`,
}}