diff --git a/src/components/RepoCard.svelte b/src/components/RepoCard.svelte index 0a9ef54c5..942084d42 100644 --- a/src/components/RepoCard.svelte +++ b/src/components/RepoCard.svelte @@ -69,6 +69,40 @@ align-self: flex-end; } + .activity-shimmer { + width: 100%; + min-width: 185px; + aspect-ratio: 493 / 116; + background: linear-gradient( + 90deg, + var(--color-surface-base) 0%, + var(--color-surface-subtle) 50%, + var(--color-surface-base) 100% + ); + background-size: 200% 100%; + animation: + shimmer 1.8s ease-in-out infinite, + shimmer-fade-in 200ms ease-out 500ms both; + } + + @keyframes shimmer { + 0% { + background-position: 100% 0; + } + 100% { + background-position: -100% 0; + } + } + + @keyframes shimmer-fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + .headline-and-badges { display: flex; gap: 0.5rem; @@ -156,7 +190,9 @@
- {#await repoInfo.activity then activity} + {#await repoInfo.activity} +
+ {:then activity}