UI: Spinner statt LADEN-Text, Pills unter Header in Einstellungen

- ViewFallback: dezenter, zentrierter Spinner statt kaum lesbarem
  "LADEN…"-Text zwischen lazy-loaded Views
- Einstellungen: Pill-Navigation jetzt konsistent unter dem Header
  (zuvor lagen die Pills bei allen Tabs ausser "Mein Profil" darüber)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src-tauri/Cargo.lock

@@ -75,18 +75,6 @@ version = "1.0.102"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7f202df86484c868dbad7eaa557ef785d5c66295e41b460ef922eca0723b842c"
 
-[[package]]
-name = "rapport"
-version = "0.6.0"
-dependencies = [
- "log",
- "serde",
- "serde_json",
- "tauri",
- "tauri-build",
- "tauri-plugin-log",
-]
-
 [[package]]
 name = "arrayvec"
 version = "0.7.6"
@@ -2760,6 +2748,18 @@ dependencies = [
  "rand_core 0.5.1",
 ]
 
+[[package]]
+name = "rapport"
+version = "0.6.0"
+dependencies = [
+ "log",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-build",
+ "tauri-plugin-log",
+]
+
 [[package]]
 name = "raw-window-handle"
 version = "0.6.2"

src/App.jsx

@@ -28,7 +28,20 @@ const Documents      = lazy(() => import("./views/Documents.jsx"));
 const PrintView      = lazy(() => import("./print/PrintComponents.jsx").then(m => ({ default: m.PrintView })));
 
 function ViewFallback() {
-  return <div style={{ padding: 40, color: "var(--text4)", fontSize: 12, letterSpacing: "0.08em" }}>LADEN…</div>;
+  return (
+    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "calc(100vh - 60px)" }}>
+      <style>{`
+        @keyframes vf-spin { to { transform: rotate(360deg); } }
+        .vf-spinner {
+          width: 40px; height: 40px; border-radius: 50%;
+          border: 2px solid rgba(0,0,0,0.08);
+          border-top-color: rgba(0,0,0,0.45);
+          animation: vf-spin 0.9s linear infinite;
+        }
+      `}</style>
+      <div className="vf-spinner" />
+    </div>
+  );
 }
 
 export default function App() {

src/views/Settings.jsx

@@ -323,14 +323,6 @@ export default function Settings({ data, update, currentUser, uiZoom, setUiZoom
     <div>
       {ConfirmModalEl}
 
-      {tab !== "profil" && (
-        <div className="filter-bar" style={{ marginBottom: 20 }}>
-          {TABS.map(t => (
-            <button key={t.id} onClick={() => setTab(t.id)} className={`pill${tab === t.id ? " active" : ""}`}>{t.label}</button>
-          ))}
-        </div>
-      )}
-
       {/* ── Profil-Tab ── */}
       {tab === "profil" && <PersonalSettings data={data} update={update} currentUser={currentUser} uiZoom={uiZoom || 1} setUiZoom={setUiZoom || (() => {})} nav={
         <div className="filter-bar" style={{ marginBottom: 20 }}>
@@ -409,6 +401,12 @@ export default function Settings({ data, update, currentUser, uiZoom, setUiZoom
             : null
         } />
 
+        <div className="filter-bar" style={{ marginBottom: 20 }}>
+          {TABS.map(t => (
+            <button key={t.id} onClick={() => setTab(t.id)} className={`pill${tab === t.id ? " active" : ""}`}>{t.label}</button>
+          ))}
+        </div>
+
         {/* ── Tab: Studio ── */}
         {tab === "studio" && (
           <>