Skip to content

Commit 9c075c0

Browse files
thejessewintonthejessewinton
committed
lazy loading
1 parent da1e4a2 commit 9c075c0

File tree

15 files changed

+112
-113
lines changed

15 files changed

+112
-113
lines changed

‎src/lib/components/marketing/platforms.svelte

Lines changed: 32 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
import React from './(assets)/icons/react.svg';
1818
import GradientText from '$lib/components/fancy/gradient-text.svelte';
1919
import Noise from '$lib/components/fancy/noise.svelte';
20-
import { Tooltip } from 'bits-ui';
20+
// import { Tooltip } from 'bits-ui';
2121
import type { SvelteHTMLElements } from 'svelte/elements';
2222
2323
const platforms = [
@@ -101,57 +101,40 @@
101101
}
102102
)}
103103
>
104-
<Tooltip.Provider delayDuration={0} disableCloseOnTriggerClick>
105-
{#each platforms as platform, i}
106-
<Tooltip.Root>
104+
{#each platforms as platform, i}
105+
<div
106+
class="contents"
107+
style="--primary-color:{platform.primary};--secondary-color:{platform.secondary};--animation-delay:{i *
108+
25}ms"
109+
>
110+
<div
111+
class={classNames(
112+
'border-smooth group animate-fade-in relative mt-4 flex h-16 w-16 items-center justify-center border-dashed md:mt-0 md:w-full lg:border-r',
113+
{
114+
'lg:border-l': i === 0
115+
}
116+
)}
117+
>
118+
<img
119+
src={platform.icon}
120+
alt={platform.name}
121+
class="h-8 w-auto grayscale transition-all duration-500 group-hover:grayscale-0"
122+
aria-hidden={i < platforms.length - 1}
123+
/>
124+
107125
<div
108-
class="contents"
109-
style="--primary-color:{platform.primary};--secondary-color:{platform.secondary};--animation-delay:{i *
110-
25}ms"
126+
class={classNames(
127+
'absolute inset-0 opacity-0 transition-opacity group-hover:opacity-100',
128+
'bg-gradient-to-tl from-transparent to-transparent',
129+
'hover:from-(--primary-color,_#fff)/4 hover:to-(--secondary-color,_transparent)/10'
130+
)}
131+
aria-hidden={i < platforms.length - 1}
111132
>
112-
<Tooltip.Trigger
113-
class={classNames(
114-
'border-smooth group animate-fade-in relative mt-4 flex h-16 w-16 items-center justify-center border-dashed md:mt-0 md:w-full lg:border-r',
115-
{
116-
'lg:border-l': i === 0
117-
}
118-
)}
119-
>
120-
<img
121-
src={platform.icon}
122-
alt={platform.name}
123-
class="h-8 w-auto grayscale transition-all duration-500 group-hover:grayscale-0"
124-
aria-hidden={i < platforms.length - 1}
125-
/>
126-
127-
<div
128-
class={classNames(
129-
'absolute inset-0 opacity-0 transition-opacity group-hover:opacity-100',
130-
'bg-gradient-to-tl from-transparent to-transparent',
131-
'hover:from-(--primary-color,_#fff)/4 hover:to-(--secondary-color,_transparent)/10'
132-
)}
133-
aria-hidden={i < platforms.length - 1}
134-
>
135-
<Noise opacity={0.1} />
136-
</div>
137-
</Tooltip.Trigger>
138-
<Tooltip.Content
139-
sideOffset={8}
140-
side="top"
141-
class={classNames(
142-
'text-primary bg-greyscale-900 relative hidden rounded-md border-0! px-2.5 py-1 text-sm md:block',
143-
'data-[state="closed"]:animate-menu-out data-[state="instant-open"]:animate-menu-in data-[state="delayed-open"]:animate-menu-in'
144-
)}
145-
>{platform.name}
146-
<div
147-
class="absolute inset-0 rounded-md bg-gradient-to-tl from-(--primary-color,_#fff)/4 to-(--secondary-color,_transparent)/10"
148-
></div>
149-
<Tooltip.Arrow class="text-(--primary-color)/4" />
150-
</Tooltip.Content>
133+
<Noise opacity={0.1} />
151134
</div>
152-
</Tooltip.Root>
153-
{/each}
154-
</Tooltip.Provider>
135+
</div>
136+
</div>
137+
{/each}
155138
</div>
156139
{/each}
157140
</div>

‎src/routes/(marketing)/(components)/bento/(animations)/auth.svelte

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,12 @@
4949
>
5050
<div class="space-y-3 px-3 pt-2 pb-4">
5151
<div class="flex items-center gap-2">
52-
<img src="/images/icons/illustrated/dark/auth.png" alt="Auth icon" class="size-7" />
52+
<img
53+
loading="lazy"
54+
src="/images/icons/illustrated/dark/auth.png"
55+
alt="Auth icon"
56+
class="size-7"
57+
/>
5358
<h3 class="font-aeonik-pro text-label text-primary">Auth</h3>
5459
</div>
5560
<p class="text-sub-body text-primary max-w-lg font-medium">
@@ -116,7 +121,7 @@
116121
)}
117122
disabled
118123
>
119-
<img src={Google} alt="Google Icon" class="size-4" />
124+
<img loading="lazy" src={Google} alt="Google Icon" class="size-4" />
120125

121126
Google</button
122127
>

‎src/routes/(marketing)/(components)/bento/(animations)/databases.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,7 @@
147147
<div class="space-y-3 px-3 pt-2 pb-4">
148148
<div class="flex items-center gap-2">
149149
<img
150+
loading="lazy"
150151
src="/images/icons/illustrated/dark/databases.png"
151152
alt="Databases icon"
152153
class="size-7"

‎src/routes/(marketing)/(components)/bento/(animations)/functions.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@
9393
<div class="space-y-3 px-3 pt-2 pb-4">
9494
<div class="flex items-center gap-2">
9595
<img
96+
loading="lazy"
9697
src="/images/icons/illustrated/dark/functions.png"
9798
alt="Functions icon"
9899
class="size-7"

‎src/routes/(marketing)/(components)/bento/(animations)/messaging.svelte

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
<div class="space-y-3 px-3 pt-2 pb-4">
5858
<div class="flex items-center gap-2">
5959
<img
60+
loading="lazy"
6061
src="/images/icons/illustrated/dark/messaging.png"
6162
alt="Messaging icon"
6263
class="size-7"
@@ -113,13 +114,13 @@
113114
class="bg-accent text-micro absolute -top-1 -right-1 flex size-3 items-center justify-center rounded-full"
114115
></div>
115116

116-
<img src={Email} alt="" class="size-6" />
117+
<img loading="lazy" src={Email} alt="" class="size-6" />
117118
</div>
118119
{#each [Messages, Settings, Calendar] as icon}
119120
<div
120121
class="flex aspect-square size-full shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-white/10 to-white/3 shadow-sm shadow-black/5"
121122
>
122-
<img src={icon} alt="" class="size-6" />
123+
<img loading="lazy" src={icon} alt="" class="size-6" />
123124
</div>
124125
{/each}
125126

‎src/routes/(marketing)/(components)/bento/(animations)/realtime.svelte

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
<div class="space-y-3 px-3 pt-2 pb-4">
6666
<div class="flex items-center gap-2">
6767
<img
68+
loading="lazy"
6869
src="/images/icons/illustrated/dark/realtime.png"
6970
alt="Realtime icon"
7071
class="size-7"
@@ -83,6 +84,7 @@
8384
class="relative grid aspect-square h-[240px] w-[240px] grid-cols-2 grid-rows-2 items-center justify-center"
8485
>
8586
<img
87+
loading="lazy"
8688
src={TopRight}
8789
alt="Top Right"
8890
bind:this={topRightPiece}
@@ -91,6 +93,7 @@
9193
/>
9294

9395
<img
96+
loading="lazy"
9497
src={Puzzle}
9598
alt="Puzzle Piece"
9699
class="absolute inset-0 top-1/2 left-1/2 -translate-1/2"

‎src/routes/(marketing)/(components)/bento/(animations)/sites.svelte

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,12 @@
104104
>
105105
<div class="space-y-3 px-3 pt-2 pb-4">
106106
<div class="flex items-center gap-2">
107-
<img src="/images/icons/illustrated/dark/sites.png" alt="Sites icon" class="size-7" />
107+
<img
108+
loading="lazy"
109+
src="/images/icons/illustrated/dark/sites.png"
110+
alt="Sites icon"
111+
class="size-7"
112+
/>
108113
<h3 class="font-aeonik-pro text-label text-primary">Sites</h3>
109114
</div>
110115
<p class="text-sub-body text-primary max-w-lg font-medium">
@@ -125,6 +130,7 @@
125130
</div>
126131

127132
<img
133+
loading="lazy"
128134
src={Site}
129135
alt="Site screen"
130136
class="max-h-64 rounded-2xl object-cover object-top"

‎src/routes/(marketing)/(components)/bento/(animations)/storage.svelte

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
<div class="space-y-3 px-3 pt-2 pb-4">
6464
<div class="flex items-center gap-2">
6565
<img
66+
loading="lazy"
6667
src="/images/icons/illustrated/dark/storage.png"
6768
alt="Storage icon"
6869
class="size-7"
@@ -93,6 +94,7 @@
9394
{/each}
9495

9596
<img
97+
loading="lazy"
9698
src={Image}
9799
alt="Storage"
98100
class="md:max-w-auto h-full w-full max-w-[350px] overflow-hidden object-cover transition-all"

‎src/routes/(marketing)/(components)/bento/bento.svelte

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,12 @@
7373
<span
7474
class="text-primary text-caption flex items-center justify-center gap-1 font-medium"
7575
>
76-
<img src={product.icon} alt={product.label} class="size-6" />
76+
<img
77+
loading="lazy"
78+
src={product.icon}
79+
alt={product.label}
80+
class="size-6"
81+
/>
7782
{product.label}</span
7883
>
7984
</a>
@@ -95,7 +100,12 @@
95100
<span
96101
class="text-primary text-caption flex items-center justify-center gap-1 font-medium"
97102
>
98-
<img src={product.icon} alt={product.label} class="size-6" />
103+
<img
104+
loading="lazy"
105+
src={product.icon}
106+
alt={product.label}
107+
class="size-6"
108+
/>
99109
{product.label}</span
100110
>
101111
</a>

‎src/routes/(marketing)/(components)/case-studies.svelte

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@
7171
)}
7272
>
7373
<img
74+
loading="lazy"
7475
src={study.logo}
7576
alt={study.headline}
7677
width={100}
@@ -89,6 +90,7 @@
8990
)}
9091
>
9192
<img
93+
loading="lazy"
9294
width={100}
9395
height={100}
9496
src={study.logo}
@@ -117,6 +119,7 @@
117119
<div class="mt-4 flex flex-col justify-between gap-4 lg:flex-row">
118120
<div class="flex items-center gap-2">
119121
<img
122+
loading="lazy"
120123
src={study.avatar}
121124
alt={study.headline}
122125
class="size-8 rounded-full md:size-6"

0 commit comments

Comments
 (0)