Skip to content

Commit 60d6ead

Browse files
ItzNotABugItzNotABug
committed
update: bye, bye usage layout shift 👋
1 parent 13a0f5e commit 60d6ead

21 files changed

Lines changed: 458 additions & 888 deletions

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
"@ai-sdk/svelte": "^1.1.24",
2525
"@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@6031134",
2626
"@appwrite.io/pink-icons": "0.25.0",
27-
"@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@2cf27e0",
27+
"@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@1489b16",
2828
"@appwrite.io/pink-legacy": "^1.0.3",
29-
"@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@40fb564",
29+
"@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@1489b16",
3030
"@faker-js/faker": "^9.9.0",
3131
"@popperjs/core": "^2.11.8",
3232
"@sentry/sveltekit": "^8.38.0",

‎pnpm-lock.yaml‎

Lines changed: 10 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/charts/line.svelte‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
export let series: LineSeriesOption[];
88
export let options: EChartsOption = null;
99
export let formatted: 'days' | 'hours' = 'days';
10+
11+
export let applyStyles: boolean = true;
1012
</script>
1113

1214
<Base
@@ -16,10 +18,11 @@
1618
s.type = 'line';
1719
s.stack = 'total';
1820
s.lineStyle = {
19-
shadowBlur: 38,
20-
shadowColor: Colors.Primary,
21-
shadowOffsetY: 15,
22-
shadowOffsetX: 0
21+
shadowBlur: applyStyles ? 38 : undefined,
22+
shadowColor: applyStyles ? Colors.Primary : undefined,
23+
shadowOffsetY: applyStyles ? 15 : undefined,
24+
shadowOffsetX: 0,
25+
width: applyStyles ? undefined : 2
2326
};
2427
s.showSymbol = false;
2528

‎src/lib/components/card.svelte‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
danger?: boolean;
1818
style?: string;
1919
class?: string;
20+
fullHeightChild?: boolean;
2021
};
2122
2223
type ButtonProps = {
@@ -40,19 +41,20 @@
4041
export let padding: $$Props['padding'] = 'm';
4142
export let radius: $$Props['radius'] = 'm';
4243
export let variant: $$Props['variant'] = 'primary';
44+
export let fullHeightChild: $$Props['fullHeightChild'] = false;
4345
4446
$: resolvedClasses = [classes].filter(Boolean).join(' ');
4547
</script>
4648

4749
{#if href}
4850
<Card.Link class={resolvedClasses} {href} {style} {padding} {radius} {variant} on:click>
49-
<Layout.Stack gap="xl">
51+
<Layout.Stack gap="xl" height={fullHeightChild ? '100%' : undefined}>
5052
<slot />
5153
</Layout.Stack>
5254
</Card.Link>
5355
{:else if isButton}
5456
<Card.Button class={resolvedClasses} {style} {padding} {radius} {variant} on:click>
55-
<Layout.Stack gap="xl">
57+
<Layout.Stack gap="xl" height={fullHeightChild ? '100%' : undefined}>
5658
<slot />
5759
</Layout.Stack>
5860
</Card.Button>
@@ -64,7 +66,7 @@
6466
{padding}
6567
{radius}
6668
{variant}>
67-
<Layout.Stack gap="xl">
69+
<Layout.Stack gap="xl" height={fullHeightChild ? '100%' : undefined}>
6870
<slot />
6971
</Layout.Stack>
7072
</Card.Base>

‎src/lib/helpers/faker.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,3 +197,30 @@ function generateSingleValue(column: Columns): string | number | boolean | null
197197
}
198198
}
199199
}
200+
201+
function seededRandom(seed: number) {
202+
const x = Math.sin(seed) * 10000;
203+
return x - Math.floor(x);
204+
}
205+
206+
export function generateFakeBarChartData(seed = 1) {
207+
const fakeData: [number, number][] = [];
208+
const now = Date.now();
209+
for (let i = 23; i >= 0; i--) {
210+
const val = seededRandom(seed + i) * 1_000_000;
211+
fakeData.push([now - i * 60 * 60 * 1000, Math.round(val)]);
212+
}
213+
return fakeData;
214+
}
215+
216+
export function generateFakeLineChartData(seed = 2) {
217+
const fakeData: [number, number][] = [];
218+
const now = Date.now();
219+
let value = seededRandom(seed) * 5000 + 5000;
220+
for (let i = 23; i >= 0; i--) {
221+
value += (seededRandom(seed + i) - 0.5) * 1000;
222+
value = Math.max(0, value);
223+
fakeData.push([now - i * 60 * 60 * 1000, Math.round(value)]);
224+
}
225+
return fakeData;
226+
}

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script lang="ts">
2+
import { fade } from 'svelte/transition';
3+
import { Layout, Skeleton, Typography } from '@appwrite.io/pink-svelte';
4+
5+
let {
6+
loading = false,
7+
metricName,
8+
resourceMetric = null
9+
}: {
10+
loading: boolean;
11+
metricName: string;
12+
resourceMetric?:
13+
| string
14+
| {
15+
value: string;
16+
unit: string;
17+
}
18+
| null;
19+
} = $props();
20+
21+
function isMetricObject(
22+
metric: typeof resourceMetric
23+
): metric is { value: string; unit: string } {
24+
return metric !== null && typeof metric === 'object';
25+
}
26+
</script>
27+
28+
<Layout.Stack gap="xxxs">
29+
<Typography.Title>
30+
<div class="overlay-container">
31+
{#if loading}
32+
<div class="overlay-item skeleton" transition:fade={{ duration: 300 }}>
33+
<Skeleton height="100%" width="7.5rem" variant="line" style="opacity: 0.35" />
34+
</div>
35+
{:else if resourceMetric !== null}
36+
<div class="overlay-item" transition:fade={{ duration: 300 }}>
37+
{#if isMetricObject(resourceMetric)}
38+
{resourceMetric.value}
39+
<span style:line-height="0%" style:font-size="var(--font-size-0)">
40+
{resourceMetric.unit}
41+
</span>
42+
{:else}
43+
{resourceMetric}
44+
{/if}
45+
</div>
46+
{/if}
47+
</div>
48+
</Typography.Title>
49+
50+
<Typography.Text>{metricName}</Typography.Text>
51+
</Layout.Stack>
52+
53+
<style lang="scss">
54+
.overlay-container {
55+
display: grid;
56+
min-height: 1lh;
57+
align-items: stretch;
58+
grid-template-areas: 'content';
59+
}
60+
61+
.overlay-item {
62+
grid-area: content;
63+
64+
&.skeleton {
65+
display: flex;
66+
align-items: center;
67+
}
68+
}
69+
</style>

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<script lang="ts">
2+
import { fade } from 'svelte/transition';
3+
import { Skeleton, Typography } from '@appwrite.io/pink-svelte';
4+
5+
let {
6+
value,
7+
resource,
8+
unit = null,
9+
loading = false
10+
}: {
11+
loading: boolean;
12+
resource: string;
13+
unit?: string;
14+
value: string | number | boolean;
15+
} = $props();
16+
</script>
17+
18+
<Typography.Title>
19+
<div class="overlay-container">
20+
{#if loading}
21+
<div class="overlay-item skeleton" transition:fade={{ duration: 300 }}>
22+
<Skeleton
23+
height="100%"
24+
width="5rem"
25+
variant="line"
26+
style="opacity: 0.35; margin-bottom: 1rem; margin-inline-start: -2px" />
27+
</div>
28+
{:else}
29+
<div class="overlay-item" transition:fade={{ duration: 300, delay: 150 }}>
30+
{value}
31+
{#if unit}
32+
<span style:line-height="0%" style:font-size="var(--font-size-0)">
33+
{unit}
34+
</span>
35+
{/if}
36+
</div>
37+
{/if}
38+
</div>
39+
</Typography.Title>
40+
41+
<Typography.Text>
42+
{resource}
43+
</Typography.Text>
44+
45+
<style lang="scss">
46+
.overlay-container {
47+
display: grid;
48+
min-height: 1lh;
49+
align-items: stretch;
50+
grid-template-areas: 'content';
51+
}
52+
53+
.overlay-item {
54+
grid-area: content;
55+
56+
&.skeleton {
57+
display: flex;
58+
align-items: center;
59+
}
60+
}
61+
</style>

0 commit comments

Comments
 (0)