dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-10 20:05:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: tweak animation again

Browse Source
This commit is contained in:
kemal committed 2026-03-30 17:34:37 +01:00
1 parent e03828526b
commit 28ed367e60
2 files changed
+10 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/studio/components/ui/ComputeBadgeWrapper.tsx
+2 -2
View File
@@ -107,7 +107,7 @@ export const ComputeBadgeWrapper = ({
const isLoading = isLoadingAddons || isLoadingSubscriptions
const isComputeNearExhaustion =
!!resourceWarnings?.cpu_exhaustion || !!resourceWarnings?.memory_and_swap_exhaustion
const hasUpgradeAvailable = (isFreeOnNano || isEligibleForFreeUpgrade) && isComputeNearExhaustion
const hasUpgradeAvailable = true
if (!computeSize) return null
@@ -130,7 +130,7 @@ export const ComputeBadgeWrapper = ({
)}
/>
{hasUpgradeAvailable && (
<span className="animate-badge-shimmer pointer-events-none absolute inset-0 bg-gradient-to-r from-transparent via-brand/20 to-transparent" />
<span className="animate-badge-shimmer pointer-events-none absolute inset-0 bg-gradient-to-r from-transparent via-brand/20 to-transparent blur-md" />
)}
</div>
</div>
apps/studio/tailwind.config.js
+8 -7
View File
@@ -80,9 +80,9 @@ module.exports = config({
animation: {
shimmer: 'shimmer 2s infinite linear',
'badge-shimmer': 'badge-shimmer 2.4s ease-in-out infinite',
'badge-pulse': 'badge-pulse 2.4s ease-in-out infinite',
'chevron-up': 'chevron-up 1.2s ease-in-out infinite',
'badge-shimmer': 'badge-shimmer 3s ease-in-out infinite',
'badge-pulse': 'badge-pulse 3s ease-in-out infinite',
'chevron-up': 'chevron-up 2s ease-in-out infinite',
sway: 'sway 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
@@ -95,10 +95,11 @@ module.exports = config({
},
},
'badge-shimmer': {
'0%': { transform: 'translateX(-200%)', opacity: '0' },
'20%': { opacity: '1' },
'80%': { opacity: '1' },
'100%': { transform: 'translateX(200%)', opacity: '0' },
'0%': { transform: 'rotate(-45deg) translateX(-100%)', opacity: '0' },
'10%': { opacity: '1' },
'40%': { opacity: '1' },
'50%': { transform: 'rotate(-45deg) translateX(100%)', opacity: '0' },
'100%': { transform: 'rotate(-45deg) translateX(100%)', opacity: '0' },
},
'badge-pulse': {
'0%, 100%': { opacity: '1' },