Christoph/GitLite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 35 Wiki Activity

feat(RepoLoadingOverlay): redesign loading overlay with new animations

Browse Source 
The loading overlay component has been significantly redesigned to enhance the user experience. The previous SVG-based loading animation has been replaced with a more visually appealing layout that includes new animations and an icon. This update aims to improve the overall aesthetics and interactivity of the loading state.

- Introduced new loading animations and visual elements
- Added a background grid effect for a dynamic appearance
- Updated styles for better responsiveness and visual hierarchy
This commit is contained in:
Christoph Brandau
2026-07-08 14:33:25 +02:00
parent c9a93f1d0a
commit ba2065d3c4
1 changed files with 162 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/RepoLoadingOverlay.svelte
+161 -85
View File
@@ -1,33 +1,24 @@
<script lang="ts">
import iconUrl from "../../../src-tauri/icons/icon.png";
export let label = "Opening repository";
export let repoName = "";
</script>
<div class="repo-loading" role="status" aria-live="polite">
<div class="repo-loading-grid" aria-hidden="true"></div>
<div class="repo-loading-card">
<!-- Animated git graph: nodes light up in sequence while a branch draws itself -->
<svg class="git-graph" viewBox="0 0 120 120" aria-hidden="true">
<defs>
<linearGradient id="gl-line" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#646cff" />
<stop offset="100%" stop-color="#41d1ff" />
</linearGradient>
</defs>
<!-- rotating dashed ring -->
<circle class="ring" cx="60" cy="60" r="52" />
<!-- main trunk -->
<path class="trunk" d="M42 22 L42 98" />
<!-- branch forking off and merging back -->
<path class="branch" d="M42 44 C42 62, 82 58, 82 76 L82 88" />
<!-- commit nodes -->
<circle class="node n1" cx="42" cy="30" r="6" />
<circle class="node n2" cx="42" cy="60" r="6" />
<circle class="node n3" cx="82" cy="88" r="6" />
<circle class="node n4" cx="42" cy="90" r="6" />
<div class="repo-loading-mark">
<span class="repo-loading-halo halo-one"></span>
<span class="repo-loading-halo halo-two"></span>
<svg class="repo-loading-traces" viewBox="0 0 220 220" aria-hidden="true">
<path class="trace trace-main" d="M28 154 C72 114, 88 108, 110 110 S156 116, 192 68" />
<path class="trace trace-branch" d="M62 74 C100 88, 126 124, 158 166" />
<path class="trace trace-cut" d="M46 180 L174 180" />
</svg>
<img src={iconUrl} alt="" class="repo-loading-icon" />
<span class="repo-loading-sheen"></span>
</div>
<div class="repo-loading-text">
<span class="repo-loading-label">{label}…</span>
@@ -50,61 +41,133 @@
z-index: 400;
display: grid;
place-items: center;
background: #050712;
overflow: hidden;
background:
radial-gradient(circle at 50% 42%, rgba(137, 92, 255, 0.18), transparent 34%),
linear-gradient(135deg, #050712 0%, #080b16 46%, #120b18 100%);
animation: overlay-in 180ms ease;
}
.repo-loading-grid {
position: absolute;
inset: 0;
opacity: 0.28;
background-image:
linear-gradient(rgba(151, 118, 255, 0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 109, 38, 0.08) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: radial-gradient(circle at center, black 0%, transparent 68%);
animation: grid-drift 10s linear infinite;
}
.repo-loading-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 34px 46px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-surface-raised);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
gap: 18px;
width: min(420px, calc(100vw - 42px));
padding: 30px 34px 28px;
border: 1px solid rgba(160, 124, 255, 0.24);
border-radius: 16px;
background:
linear-gradient(180deg, rgba(23, 26, 43, 0.9), rgba(12, 15, 27, 0.92)),
var(--color-surface-raised);
box-shadow:
0 26px 90px rgba(0, 0, 0, 0.62),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.git-graph {
width: 118px;
height: 118px;
.repo-loading-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(110deg, transparent 0%, rgba(160, 124, 255, 0.1) 48%, transparent 54%);
transform: translateX(-100%);
animation: card-scan 2.8s ease-in-out infinite;
}
.repo-loading-mark {
position: relative;
width: 168px;
height: 168px;
display: grid;
place-items: center;
isolation: isolate;
}
.repo-loading-halo {
position: absolute;
inset: 10px;
border: 1px solid rgba(151, 118, 255, 0.24);
border-radius: 34px;
transform: rotate(45deg);
}
.repo-loading-halo.halo-one {
animation: halo-breathe 2.4s ease-in-out infinite;
}
.repo-loading-halo.halo-two {
inset: 24px;
border-color: rgba(255, 109, 38, 0.26);
animation: halo-breathe 2.4s ease-in-out infinite reverse;
}
.repo-loading-traces {
position: absolute;
inset: -18px;
width: 204px;
height: 204px;
overflow: visible;
z-index: 0;
}
.git-graph .ring {
.repo-loading-traces .trace {
fill: none;
stroke: rgba(100, 108, 255, 0.22);
stroke-width: 2;
stroke-dasharray: 26 18;
transform-origin: 60px 60px;
animation: ring-spin 5s linear infinite;
}
.git-graph .trunk,
.git-graph .branch {
fill: none;
stroke: url(#gl-line);
stroke-width: 4;
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 165;
stroke-dashoffset: 165;
filter: drop-shadow(0 0 8px rgba(151, 118, 255, 0.55));
animation: trace-draw 2.6s ease-in-out infinite;
}
.repo-loading-traces .trace-main {
stroke: #9b70ff;
}
.repo-loading-traces .trace-branch {
stroke: #ff6d26;
animation-delay: 0.28s;
}
.repo-loading-traces .trace-cut {
stroke: rgba(255, 255, 255, 0.42);
stroke-dasharray: 128;
stroke-dashoffset: 128;
animation-delay: 0.55s;
}
.git-graph .branch {
stroke-dasharray: 90;
stroke-dashoffset: 90;
animation: branch-draw 2.4s ease-in-out infinite;
.repo-loading-icon {
position: relative;
z-index: 1;
width: 132px;
height: 132px;
object-fit: contain;
filter:
drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 18px rgba(151, 118, 255, 0.28));
animation: icon-float 2.4s ease-in-out infinite;
}
.git-graph .node {
fill: var(--color-surface-alt);
stroke: url(#gl-line);
stroke-width: 4;
animation: node-pulse 2.4s ease-in-out infinite;
.repo-loading-sheen {
position: absolute;
z-index: 2;
width: 108px;
height: 168px;
border-radius: 50%;
background: linear-gradient(90deg, transparent 8%, rgba(255, 255, 255, 0.18), transparent 72%);
transform: translateX(-96px) rotate(16deg);
mix-blend-mode: screen;
animation: icon-sheen 2.8s ease-in-out infinite;
}
.git-graph .n1 { animation-delay: 0s; }
.git-graph .n2 { animation-delay: 0.5s; }
.git-graph .n3 { animation-delay: 1s; }
.git-graph .n4 { animation-delay: 1.5s; }
.repo-loading-text {
display: flex;
@@ -117,8 +180,7 @@
.repo-loading-label {
color: var(--color-ink);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
font-weight: 800;
}
.repo-loading-name {
@@ -133,45 +195,59 @@
.repo-loading-bar {
position: relative;
width: 180px;
height: 3px;
width: min(230px, 100%);
height: 4px;
overflow: hidden;
border-radius: 3px;
background: rgba(100, 108, 255, 0.16);
border-radius: 999px;
background: rgba(151, 118, 255, 0.14);
}
.repo-loading-bar span {
position: absolute;
inset: 0;
width: 40%;
border-radius: 3px;
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
animation: bar-slide 1.3s ease-in-out infinite;
width: 46%;
border-radius: inherit;
background: linear-gradient(90deg, transparent, #9b70ff 40%, #ff6d26 74%, transparent);
box-shadow: 0 0 16px rgba(255, 109, 38, 0.32);
animation: bar-slide 1.35s ease-in-out infinite;
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes grid-drift { to { transform: translate3d(42px, 42px, 0); } }
@keyframes card-scan {
0%, 34% { transform: translateX(-100%); }
72%, 100% { transform: translateX(100%); }
}
@keyframes icon-float {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-5px) scale(1.015); }
}
@keyframes icon-sheen {
0%, 18% { transform: translateX(-96px) rotate(16deg); opacity: 0; }
44% { opacity: 0.9; }
68%, 100% { transform: translateX(98px) rotate(16deg); opacity: 0; }
}
@keyframes halo-breathe {
0%, 100% { opacity: 0.35; transform: rotate(45deg) scale(0.95); }
50% { opacity: 0.8; transform: rotate(45deg) scale(1.04); }
}
@keyframes bar-slide {
0% { transform: translateX(-120%); }
100% { transform: translateX(320%); }
}
@keyframes branch-draw {
0% { stroke-dashoffset: 90; opacity: 0.35; }
45% { stroke-dashoffset: 0; opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes node-pulse {
0%, 100% { fill: var(--color-surface-alt); filter: none; }
50% {
fill: var(--color-primary);
filter: drop-shadow(0 0 6px rgba(100, 108, 255, 0.8));
}
@keyframes trace-draw {
0% { stroke-dashoffset: 165; opacity: 0; }
36% { opacity: 1; }
64%, 100% { stroke-dashoffset: 0; opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce) {
.git-graph .ring,
.git-graph .branch,
.git-graph .node,
.repo-loading-grid,
.repo-loading-card::before,
.repo-loading-halo,
.repo-loading-traces .trace,
.repo-loading-icon,
.repo-loading-sheen,
.repo-loading-bar span { animation: none; }
.git-graph .branch { stroke-dashoffset: 0; }
.repo-loading-traces .trace { stroke-dashoffset: 0; opacity: 0.72; }
}
</style>