zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-14 09:59:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(icons): avoid hidden spinner animations (#1476)

Browse Source
This commit is contained in:
Sam Potts
2026-04-28 16:24:53 +10:00
committed by GitHub
parent cce48c01fa
commit c388dd35a9
11 changed files with 65 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -2,6 +2,7 @@
# Dependencies & Logs
# -------------------------
node_modules/
.pnpm-store/
logs/
.yarn/*
*.log
packages/icons/src/assets/default/spinner.svg
+20 -34
View File
@@ -1,35 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
<rect width="2" height="5" x="8" y=".5" rx="1" opacity="0.5">
<animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite" calcMode="linear" />
</rect>
<rect width="2" height="5" x="12.243" y="2.257" rx="1" transform="rotate(45 13.243 4.757)" opacity="0.45">
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.125s" repeatCount="indefinite" calcMode="linear" />
</rect>
<rect width="5" height="2" x="12.5" y="8" rx="1" opacity="0.4">
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.25s" repeatCount="indefinite" calcMode="linear" />
</rect>
<rect width="5" height="2" x="10.743" y="12.243" rx="1" transform="rotate(45 13.243 13.243)" opacity="0.35">
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.375s" repeatCount="indefinite" calcMode="linear" />
</rect>
<rect width="2" height="5" x="8" y="12.5" rx="1" opacity="0.3">
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.5s" repeatCount="indefinite" calcMode="linear" />
</rect>
<rect width="2" height="5" x="3.757" y="10.743" rx="1" transform="rotate(45 4.757 13.243)" opacity="0.25">
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.625s" repeatCount="indefinite" calcMode="linear" />
</rect>
<rect width="5" height="2" x=".5" y="8" rx="1" opacity="0.15">
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.75s" repeatCount="indefinite" calcMode="linear" />
</rect>
<rect
width="5"
height="2"
x="2.257"
y="3.757"
fill-rule="nonzero"
rx="1"
transform="rotate(45 4.757 4.757)"
opacity="0.1"
>
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.875s" repeatCount="indefinite" calcMode="linear" />
</rect>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2">
<style>
@keyframes media-spinner-fade {
from { opacity: 1; }
to { opacity: 0; }
}
.media-spinner__segment {
animation: var(--media-spinner-animation, media-spinner-fade 1s linear infinite);
animation-delay: var(--media-spinner-delay);
}
</style>
<line class="media-spinner__segment" x1="9" y1="1.5" x2="9" y2="4.5" opacity="0.5" style="--media-spinner-delay:0s" />
<line class="media-spinner__segment" x1="14.5" y1="3.5" x2="12.5" y2="5.5" opacity="0.45" style="--media-spinner-delay:0.125s" />
<line class="media-spinner__segment" x1="16.5" y1="9" x2="13.5" y2="9" opacity="0.4" style="--media-spinner-delay:0.25s" />
<line class="media-spinner__segment" x1="14.5" y1="14.5" x2="12.5" y2="12.5" opacity="0.35" style="--media-spinner-delay:0.375s" />
<line class="media-spinner__segment" x1="9" y1="16.5" x2="9" y2="13.5" opacity="0.3" style="--media-spinner-delay:0.5s" />
<line class="media-spinner__segment" x1="3.5" y1="14.5" x2="5.5" y2="12.5" opacity="0.25" style="--media-spinner-delay:0.625s" />
<line class="media-spinner__segment" x1="1.5" y1="9" x2="4.5" y2="9" opacity="0.15" style="--media-spinner-delay:0.75s" />
<line class="media-spinner__segment" x1="3.5" y1="3.5" x2="5.5" y2="5.5" opacity="0.1" style="--media-spinner-delay:0.875s" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

packages/icons/src/assets/minimal/spinner.svg
+20 -34
View File
@@ -1,35 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
<rect width="2" height="5" x="8" y=".5" rx="1" opacity="0.5">
<animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite" calcMode="linear" />
</rect>
<rect width="2" height="5" x="12.243" y="2.257" rx="1" transform="rotate(45 13.243 4.757)" opacity="0.45">
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.125s" repeatCount="indefinite" calcMode="linear" />
</rect>
<rect width="5" height="2" x="12.5" y="8" rx="1" opacity="0.4">
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.25s" repeatCount="indefinite" calcMode="linear" />
</rect>
<rect width="5" height="2" x="10.743" y="12.243" rx="1" transform="rotate(45 13.243 13.243)" opacity="0.35">
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.375s" repeatCount="indefinite" calcMode="linear" />
</rect>
<rect width="2" height="5" x="8" y="12.5" rx="1" opacity="0.3">
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.5s" repeatCount="indefinite" calcMode="linear" />
</rect>
<rect width="2" height="5" x="3.757" y="10.743" rx="1" transform="rotate(45 4.757 13.243)" opacity="0.25">
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.625s" repeatCount="indefinite" calcMode="linear" />
</rect>
<rect width="5" height="2" x=".5" y="8" rx="1" opacity="0.15">
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.75s" repeatCount="indefinite" calcMode="linear" />
</rect>
<rect
width="5"
height="2"
x="2.257"
y="3.757"
fill-rule="nonzero"
rx="1"
transform="rotate(45 4.757 4.757)"
opacity="0.1"
>
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.875s" repeatCount="indefinite" calcMode="linear" />
</rect>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2">
<style>
@keyframes media-spinner-fade {
from { opacity: 1; }
to { opacity: 0; }
}
.media-spinner__segment {
animation: var(--media-spinner-animation, media-spinner-fade 1s linear infinite);
animation-delay: var(--media-spinner-delay);
}
</style>
<line class="media-spinner__segment" x1="9" y1="1.5" x2="9" y2="4.5" opacity="0.5" style="--media-spinner-delay:0s" />
<line class="media-spinner__segment" x1="14.5" y1="3.5" x2="12.5" y2="5.5" opacity="0.45" style="--media-spinner-delay:0.125s" />
<line class="media-spinner__segment" x1="16.5" y1="9" x2="13.5" y2="9" opacity="0.4" style="--media-spinner-delay:0.25s" />
<line class="media-spinner__segment" x1="14.5" y1="14.5" x2="12.5" y2="12.5" opacity="0.35" style="--media-spinner-delay:0.375s" />
<line class="media-spinner__segment" x1="9" y1="16.5" x2="9" y2="13.5" opacity="0.3" style="--media-spinner-delay:0.5s" />
<line class="media-spinner__segment" x1="3.5" y1="14.5" x2="5.5" y2="12.5" opacity="0.25" style="--media-spinner-delay:0.625s" />
<line class="media-spinner__segment" x1="1.5" y1="9" x2="4.5" y2="9" opacity="0.15" style="--media-spinner-delay:0.75s" />
<line class="media-spinner__segment" x1="3.5" y1="3.5" x2="5.5" y2="5.5" opacity="0.1" style="--media-spinner-delay:0.875s" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

packages/skins/src/default/css/components/buffering.css
+4
View File
@@ -11,6 +11,10 @@
color: oklch(1 0 0);
pointer-events: none;
&:not([data-visible]) {
--media-spinner-animation: none;
}
&[data-visible] {
display: flex;
}
packages/skins/src/default/css/components/preview.css
+6
View File
@@ -45,6 +45,12 @@
transition: opacity 150ms ease-out;
}
&:not(:has(.media-preview__thumbnail[data-loading])) {
& .media-preview__spinner {
--media-spinner-animation: none;
}
}
&:has(.media-preview__thumbnail[data-loading]) {
& .media-preview__thumbnail {
opacity: 0;
packages/skins/src/default/tailwind/components/buffering.ts
+1 -1
View File
@@ -1,4 +1,4 @@
export const bufferingIndicator = {
root: 'absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex',
root: 'absolute inset-0 hidden items-center justify-center pointer-events-none text-white not-data-visible:[--media-spinner-animation:none] data-visible:flex',
container: 'p-1 rounded-full',
};
packages/skins/src/default/tailwind/components/preview.ts
+1 -1
View File
@@ -13,6 +13,6 @@ export const preview = {
spinner: cn(
'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0',
'transition-opacity duration-150 ease-out',
'group-has-[[role=img][data-loading]]/preview:opacity-100'
'group-not-has-[[role=img][data-loading]]/preview:[--media-spinner-animation:none] group-has-[[role=img][data-loading]]/preview:opacity-100'
),
};
packages/skins/src/minimal/css/components/buffering.css
+4
View File
@@ -11,6 +11,10 @@
color: oklch(1 0 0);
pointer-events: none;
&:not([data-visible]) {
--media-spinner-animation: none;
}
&[data-visible] {
display: flex;
}
packages/skins/src/minimal/css/components/preview.css
+6
View File
@@ -37,6 +37,12 @@
transition: opacity 150ms ease-out;
}
&:not(:has(.media-preview__thumbnail[data-loading])) {
& .media-preview__spinner {
--media-spinner-animation: none;
}
}
&:has(.media-preview__thumbnail[data-loading]) {
& .media-preview__thumbnail {
opacity: 0;
packages/skins/src/minimal/tailwind/components/buffering.ts
+1 -1
View File
@@ -1,2 +1,2 @@
export const bufferingIndicator =
'absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex';
'absolute inset-0 hidden items-center justify-center pointer-events-none text-white not-data-visible:[--media-spinner-animation:none] data-visible:flex';
packages/skins/src/minimal/tailwind/components/preview.ts
+1 -1
View File
@@ -8,6 +8,6 @@ export const preview = {
spinner: cn(
'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0',
'transition-opacity duration-150 ease-out',
'group-has-[[role=img][data-loading]]/preview:opacity-100'
'group-not-has-[[role=img][data-loading]]/preview:[--media-spinner-animation:none] group-has-[[role=img][data-loading]]/preview:opacity-100'
),
};