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

add Loading Spinner when file History is loading

Browse Source 
Make Renamed instad of Del and untracked
This commit is contained in:
Christoph Brandau
2026-07-02 12:17:57 +02:00
parent 310a0fb09a
commit e18f8f1040
5 changed files with 328 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+76
View File
@@ -1371,6 +1371,82 @@
.file-history-actions .commit-action-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; justify-content: stretch; }
.file-history-actions .commit-action-buttons button { min-width: 0; justify-content: center; padding-inline: 6px; }
/* --- File history loading (scoped, non-blocking) --- */
.file-history-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 140px;
padding: 20px;
}
.file-history-loading-graph { width: 56px; height: 56px; overflow: visible; }
.file-history-loading-graph .fhl-ring {
fill: none;
stroke: rgba(100, 108, 255, 0.22);
stroke-width: 3;
stroke-dasharray: 26 18;
transform-origin: 60px 60px;
animation: fhl-ring-spin 5s linear infinite;
}
.file-history-loading-graph .fhl-trunk,
.file-history-loading-graph .fhl-branch {
fill: none;
stroke: url(#fhl-line);
stroke-width: 5;
stroke-linecap: round;
}
.file-history-loading-graph .fhl-branch {
stroke-dasharray: 90;
stroke-dashoffset: 90;
animation: fhl-branch-draw 2.4s ease-in-out infinite;
}
.file-history-loading-graph .fhl-node {
fill: var(--color-surface-alt);
stroke: url(#fhl-line);
stroke-width: 5;
animation: fhl-node-pulse 2.4s ease-in-out infinite;
}
.file-history-loading-graph .fhl-n1 { animation-delay: 0s; }
.file-history-loading-graph .fhl-n2 { animation-delay: 0.5s; }
.file-history-loading-graph .fhl-n3 { animation-delay: 1s; }
.file-history-loading-graph .fhl-n4 { animation-delay: 1.5s; }
.file-history-loading-label {
color: var(--color-ink-faint);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.01em;
}
@keyframes fhl-ring-spin { to { transform: rotate(360deg); } }
@keyframes fhl-branch-draw {
0% { stroke-dashoffset: 90; opacity: 0.35; }
45% { stroke-dashoffset: 0; opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes fhl-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));
}
}
@media (prefers-reduced-motion: reduce) {
.file-history-loading-graph .fhl-ring,
.file-history-loading-graph .fhl-branch,
.file-history-loading-graph .fhl-node { animation: none; }
.file-history-loading-graph .fhl-branch { stroke-dashoffset: 0; }
}
/* --- Git graph --- */
.graph-list { padding: 0; }