Skip to content

Commit df7f405

Browse files
ItzNotABugItzNotABug
committed
update: fixes to designs.
1 parent 7e4e4c0 commit df7f405

5 files changed

Lines changed: 94 additions & 52 deletions

File tree

‎src/routes/(console)/project-[region]-[project]/overview/(components)/skeletons/simple.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@
1818
<Typography.Title>
1919
<div class="overlay-container">
2020
{#if loading}
21-
<div class="overlay-item skeleton" transition:fade={{ duration: 300 }}>
21+
<div class="overlay-item skeleton" transition:fade={{ duration: 150 }}>
2222
<Skeleton
23-
height="100%"
23+
height="80%"
2424
width="5rem"
2525
variant="line"
26-
style="opacity: 0.35; margin-bottom: 1rem; margin-inline-start: -2px" />
26+
style="opacity: 0.35; margin-inline-start: -2px" />
2727
</div>
2828
{:else}
29-
<div class="overlay-item" transition:fade={{ duration: 300, delay: 150 }}>
29+
<div class="overlay-item" transition:fade={{ duration: 150, delay: 75 }}>
3030
{value}
3131
{#if unit}
3232
<span style:line-height="0%" style:font-size="var(--font-size-0)">

‎src/routes/(console)/project-[region]-[project]/overview/+layout.svelte‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,13 @@
3838
afterNavigate(handle);
3939
4040
async function handle() {
41+
$usage = null;
4142
$loadingProjectUsage = true;
4243
const promise = changePeriod(period);
4344
44-
if ($usage) {
45-
await promise.finally(() => {
46-
$loadingProjectUsage = false;
47-
});
48-
}
45+
await promise.finally(() => {
46+
$loadingProjectUsage = false;
47+
});
4948
}
5049
5150
function changePeriod(newPeriod: UsagePeriods) {
@@ -94,8 +93,6 @@
9493
$: $updateCommandGroupRanks({ integrations: 10 });
9594
9695
$: path = `${base}/project-${page.params.region}-${page.params.project}/overview`;
97-
98-
$: console.log(`$loadingProjectUsage: ${$loadingProjectUsage}`);
9996
</script>
10097

10198
<svelte:head>

‎src/routes/(console)/project-[region]-[project]/overview/bandwidth.svelte‎

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
import type { EChartsOption } from 'echarts';
2323
import { generateFakeBarChartData } from '$lib/helpers/faker';
2424
import ExtendedValueSkeleton from './(components)/skeletons/extended.svelte';
25+
import { fade } from 'svelte/transition';
2526
2627
let {
2728
period,
@@ -49,11 +50,10 @@
4950
return {
5051
animation: true,
5152
animationDuration: 500,
52-
animationEasing: 'cubicOut',
53-
53+
animationEasing: 'quadraticInOut',
5454
animationDurationUpdate: 500,
55-
animationEasingUpdate: 'cubicOut',
56-
55+
animationEasingUpdate: 'quadraticInOut',
56+
universalTransition: true,
5757
yAxis: {
5858
axisLabel: {
5959
formatter: (value: number) => {
@@ -98,15 +98,19 @@
9898
</Popover>
9999
</Layout.Stack>
100100

101-
{#if bandwidth.value !== '0' || loading}
102-
<div style="height: 12rem;">
103-
{#key loading}
101+
<div style="height: 12rem; position: relative;">
102+
{#if loading || bandwidth.value !== '0'}
103+
<div
104+
in:fade|local={{ duration: 500 }}
105+
out:fade|local={{ duration: 500 }}
106+
style="position: absolute; inset: 0;">
104107
<BarChart
105108
options={chartOptions}
106109
series={[
107110
{
108111
name: 'Bandwidth',
109112
data: chartData,
113+
universalTransition: true,
110114
tooltip: loading
111115
? undefined
112116
: {
@@ -116,14 +120,23 @@
116120
}
117121
}
118122
]} />
119-
{/key}
120-
</div>
121-
{:else}
122-
<Card isDashed style="height: 12rem;" fullHeightChild>
123-
<Layout.Stack gap="xs" height="100%" alignItems="center" justifyContent="center">
124-
<Icon icon={IconChartSquareBar} size="l" />
125-
<Typography.Text variant="m-600">No data to show</Typography.Text>
126-
</Layout.Stack>
127-
</Card>
128-
{/if}
123+
</div>
124+
{:else}
125+
<div
126+
in:fade|local={{ duration: 500 }}
127+
out:fade|local={{ duration: 500 }}
128+
style="position: absolute; inset: 0;">
129+
<Card isDashed fullHeightChild style="height: 100%">
130+
<Layout.Stack
131+
gap="xs"
132+
height="100%"
133+
alignItems="center"
134+
justifyContent="center">
135+
<Icon icon={IconChartSquareBar} size="l" />
136+
<Typography.Text variant="m-600">No data to show</Typography.Text>
137+
</Layout.Stack>
138+
</Card>
139+
</div>
140+
{/if}
141+
</div>
129142
</Layout.Stack>

‎src/routes/(console)/project-[region]-[project]/overview/requests.svelte‎

Lines changed: 43 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
import type { EChartsOption } from 'echarts';
2323
import { generateFakeLineChartData } from '$lib/helpers/faker';
2424
import ExtendedValueSkeleton from './(components)/skeletons/extended.svelte';
25+
import { fade } from 'svelte/transition';
2526
2627
let {
2728
period,
@@ -49,10 +50,10 @@
4950
return {
5051
animation: true,
5152
animationDuration: 500,
52-
animationEasing: 'cubicOut',
53-
53+
animationEasing: 'quadraticInOut',
5454
animationDurationUpdate: 500,
55-
animationEasingUpdate: 'cubicOut',
55+
animationEasingUpdate: 'quadraticInOut',
56+
universalTransition: true,
5657
yAxis: {
5758
axisLabel: {
5859
formatter: (value: number) => (loading ? '--' : formatNum(value))
@@ -62,6 +63,10 @@
6263
color: [loading ? 'var(--border-neutral-strong)' : 'var(--bgcolor-accent)']
6364
} satisfies EChartsOption;
6465
});
66+
67+
$effect(() => {
68+
console.log(totalMetrics($usage?.requests));
69+
});
6570
</script>
6671

6772
<Layout.Stack gap="l">
@@ -91,24 +96,39 @@
9196
</Popover>
9297
</Layout.Stack>
9398

94-
{#if totalMetrics($usage?.requests) !== 0 || loading}
95-
<div style="height: 12rem;">
96-
<LineChart
97-
applyStyles={!loading}
98-
options={chartOptions}
99-
series={[
100-
{
101-
name: 'Requests',
102-
data: chartData
103-
}
104-
]} />
105-
</div>
106-
{:else}
107-
<Card isDashed style="height: 12rem;" fullHeightChild>
108-
<Layout.Stack gap="xs" height="100%" alignItems="center" justifyContent="center">
109-
<Icon icon={IconChartSquareBar} size="l" />
110-
<Typography.Text variant="m-600">No data to show</Typography.Text>
111-
</Layout.Stack>
112-
</Card>
113-
{/if}
99+
<div style="height: 12rem; position: relative;">
100+
{#if loading || totalMetrics($usage?.requests) !== 0}
101+
<div
102+
in:fade|local={{ duration: 500 }}
103+
out:fade|local={{ duration: 500 }}
104+
style="position: absolute; inset: 0;">
105+
<LineChart
106+
applyStyles={!loading}
107+
options={chartOptions}
108+
series={[
109+
{
110+
name: 'Requests',
111+
data: chartData,
112+
universalTransition: true
113+
}
114+
]} />
115+
</div>
116+
{:else}
117+
<div
118+
in:fade|local={{ duration: 500 }}
119+
out:fade|local={{ duration: 500 }}
120+
style="position: absolute; inset: 0;">
121+
<Card isDashed fullHeightChild style="height: 100%">
122+
<Layout.Stack
123+
gap="xs"
124+
height="100%"
125+
alignItems="center"
126+
justifyContent="center">
127+
<Icon icon={IconChartSquareBar} size="l" />
128+
<Typography.Text variant="m-600">No data to show</Typography.Text>
129+
</Layout.Stack>
130+
</Card>
131+
</div>
132+
{/if}
133+
</div>
114134
</Layout.Stack>

‎src/routes/(console)/project-[region]-[project]/overview/store.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import type { Models, ProjectUsageRange } from '@appwrite.io/console';
55
import { page } from '$app/state';
66
import type { Column } from '$lib/helpers/types';
77
import { hash } from '$lib/helpers/string';
8+
import { sleep } from '$lib/helpers/promises';
9+
import { isDev } from '$lib/system';
810

911
export const loadingProjectUsage = writable(true);
1012

@@ -14,6 +16,7 @@ export const usage = cachedStore<
1416
load: (start: string, end: string, period: ProjectUsageRange) => Promise<void>;
1517
}
1618
>('projectUsage', function ({ set }) {
19+
const minTime = 1250;
1720
let lastParamsHash: string | null = null;
1821

1922
return {
@@ -22,12 +25,14 @@ export const usage = cachedStore<
2225
const currentParamsHash = hash([page.params.project, start, end, period.toString()]);
2326

2427
// don't hit the API call if we have the data!
25-
if (lastParamsHash === currentParamsHash && currentData) {
28+
if (lastParamsHash === currentParamsHash && currentData && !isDev) {
2629
loadingProjectUsage.set(false);
2730
return;
2831
}
2932

33+
const initTime = Date.now();
3034
loadingProjectUsage.set(true);
35+
3136
const usages = await sdk
3237
.forProject(page.params.region, page.params.project)
3338
.project.getUsage({
@@ -36,6 +41,13 @@ export const usage = cachedStore<
3641
period
3742
});
3843

44+
const elapsed = Date.now() - initTime;
45+
const remainingTime = minTime - elapsed;
46+
47+
if (remainingTime >= 0) {
48+
await sleep(remainingTime);
49+
}
50+
3951
set(usages);
4052
lastParamsHash = currentParamsHash;
4153
loadingProjectUsage.set(false);

0 commit comments

Comments
 (0)