Add repository opening loading overlay
Introduce a full-screen, animated overlay to provide visual feedback when the application is opening a repository. This prevents perceived delays and informs the user about the ongoing operation. Also, enhance build performance and binary size by configuring Cargo profiles: - Development: Enable incremental compilation, use line-tables-only debug info, and optimize third-party dependencies to speed up rebuilds and improve runtime snappiness during development. - Release: Apply aggressive optimizations (opt-level 3, thin LTO, single codegen unit, stripping) for smaller, faster binaries.
This commit is contained in:
Christoph Brandau
@@ -18,3 +18,24 @@ tauri-build = { version = "2", features = [] }
|
||||
|
||||
[target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
|
||||
tauri-plugin-updater = "2"
|
||||
|
||||
# ── Build profiles ───────────────────────────────────────────────────────────
|
||||
# Dev: keep incremental compilation and emit only line-table debug info instead
|
||||
# of full debuginfo. This cuts link time noticeably (linking is the slow part of
|
||||
# a `tauri dev` recompile) while still giving panic backtraces with line numbers.
|
||||
[profile.dev]
|
||||
incremental = true
|
||||
debug = "line-tables-only"
|
||||
|
||||
# Optimize third-party dependencies once (they are cached), so the running dev
|
||||
# build is snappy without slowing down rebuilds of our own crate.
|
||||
[profile.dev.package."*"]
|
||||
opt-level = 2
|
||||
|
||||
# Release: smaller binary (also shrinks the auto-updater download) without
|
||||
# regressing runtime performance of the code-search feature.
|
||||
[profile.release]
|
||||
opt-level = 3
|
||||
lto = "thin"
|
||||
codegen-units = 1
|
||||
strip = true
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
import FileHistoryPanel from "./lib/components/FileHistoryPanel.svelte";
|
||||
import GlobalSearchDialog from "./lib/components/GlobalSearchDialog.svelte";
|
||||
import HistoryPanel from "./lib/components/HistoryPanel.svelte";
|
||||
import RepoLoadingOverlay from "./lib/components/RepoLoadingOverlay.svelte";
|
||||
import ResolveDialog from "./lib/components/ResolveDialog.svelte";
|
||||
import StatusPanel from "./lib/components/StatusPanel.svelte";
|
||||
import UpdateToast from "./lib/components/UpdateToast.svelte";
|
||||
@@ -133,6 +134,8 @@
|
||||
|
||||
$: isBusy = operation.length > 0;
|
||||
$: hasRepository = activeRepoPath.length > 0 && status !== null;
|
||||
$: openingRepo = operation === "Opening repository";
|
||||
$: repoDisplayName = ((repoPath || activeRepoPath).split(/[\\/]/).filter(Boolean).pop()) ?? "";
|
||||
$: changedFiles = status?.files ?? [];
|
||||
$: stagedCount = status?.files.filter((f) => f.staged !== null).length ?? 0;
|
||||
$: unstagedCount = status?.files.filter((f) => f.unstaged !== null).length ?? 0;
|
||||
@@ -1207,6 +1210,11 @@
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Full-screen overlay while a repository is being opened -->
|
||||
{#if openingRepo}
|
||||
<RepoLoadingOverlay repoName={repoDisplayName} />
|
||||
{/if}
|
||||
|
||||
<!-- Conflict resolve dialog -->
|
||||
{#if resolveDialogOpen}
|
||||
<ResolveDialog
|
||||
|
||||
@@ -0,0 +1,175 @@
|
||||
<script lang="ts">
|
||||
export let label = "Repository wird geöffnet";
|
||||
export let repoName = "";
|
||||
</script>
|
||||
|
||||
<div class="repo-loading" role="status" aria-live="polite">
|
||||
<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" />
|
||||
</svg>
|
||||
|
||||
<div class="repo-loading-text">
|
||||
<span class="repo-loading-label">{label}…</span>
|
||||
{#if repoName}
|
||||
<span class="repo-loading-name" title={repoName}>{repoName}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="repo-loading-bar"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.repo-loading {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 400;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(6, 6, 14, 0.72);
|
||||
backdrop-filter: blur(8px);
|
||||
animation: overlay-in 180ms ease;
|
||||
}
|
||||
|
||||
.repo-loading-card {
|
||||
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);
|
||||
}
|
||||
|
||||
.git-graph {
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.git-graph .ring {
|
||||
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-linecap: round;
|
||||
}
|
||||
|
||||
.git-graph .branch {
|
||||
stroke-dasharray: 90;
|
||||
stroke-dashoffset: 90;
|
||||
animation: branch-draw 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;
|
||||
}
|
||||
.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;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.repo-loading-label {
|
||||
color: var(--color-ink);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.repo-loading-name {
|
||||
max-width: 260px;
|
||||
overflow: hidden;
|
||||
color: var(--color-ink-faint);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12.5px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.repo-loading-bar {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 3px;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
background: rgba(100, 108, 255, 0.16);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes ring-spin { to { transform: rotate(360deg); } }
|
||||
@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));
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.git-graph .ring,
|
||||
.git-graph .branch,
|
||||
.git-graph .node,
|
||||
.repo-loading-bar span { animation: none; }
|
||||
.git-graph .branch { stroke-dashoffset: 0; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user