fix(ui): default skeleton opacity and reduce animation peak (#11367)

PavelLaptev · web-flow · commit 5aa040463fd4 · 2025-11-26T00:20:57.000Z
diff --git a/packages/ui/src/lib/components/SkeletonBone.svelte b/packages/ui/src/lib/components/SkeletonBone.svelte
@@ -12,7 +12,7 @@
 		height = '1rem',
 		radius = 'var(--radius-ml)',
 		color = 'var(--clr-scale-ntrl-70)',
-		opacity = 0.2
+		opacity = 0.35
 	}: Props = $props();
 </script>
 
@@ -35,7 +35,7 @@
 			opacity: var(--opacity-value);
 		}
 		100% {
-			opacity: calc(var(--opacity-value) + var(--opacity-value) * 0.7);
+			opacity: calc(var(--opacity-value) + var(--opacity-value) * 0.5);
 		}
 	}
 </style>

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`height = '1rem',`
`13`	`13`	`radius = 'var(--radius-ml)',`
`14`	`14`	`color = 'var(--clr-scale-ntrl-70)',`
`15`		`- opacity = 0.2`
	`15`	`+ opacity = 0.35`
`16`	`16`	`}: Props = $props();`
`17`	`17`	`</script>`
`18`	`18`
`@@ -35,7 +35,7 @@`
`35`	`35`	`opacity: var(--opacity-value);`
`36`	`36`	`}`
`37`	`37`	`100% {`
`38`		`- opacity: calc(var(--opacity-value) + var(--opacity-value) * 0.7);`
	`38`	`+ opacity: calc(var(--opacity-value) + var(--opacity-value) * 0.5);`
`39`	`39`	`}`
`40`	`40`	`}`
`41`	`41`	`</style>`