peach-browser / history

4fd968be25e7

Vault Health loading screen: centered glyph with rotating arc + 'Checking your vault's health' title + scanning copy + indeterminate sweep bar; replaces the too-subtle skeleton that read as broken; bump v2.11.11

time
2026-04-29 01:43 UTC · 6 months ago
machine
koh2
parent
e397baee42fc

↓ peach-browser-4fd968be.tar.gzatlas at this save

files changed5 files manifest.firefox.json+1 −1manifest.json+1 −1package.json+1 −1src/popup/styles/popup.css+51 −71src/popup/views/Health.tsx+15 −27
manifest.firefox.json+1 −1 
@@ -1,7 +1,7 @@11 {22   "manifest_version": 3,33   "name": "Peach",4-  "version": "2.11.10",4+  "version": "2.11.11",55   "description": "Zero-knowledge password manager",66   "browser_specific_settings": {77     "gecko": {

view file

manifest.json+1 −1 
@@ -1,7 +1,7 @@11 {22   "manifest_version": 3,33   "name": "Peach",4-  "version": "2.11.10",4+  "version": "2.11.11",55   "description": "Zero-knowledge password manager",66   "action": {77     "default_popup": "src/popup/index.html",

view file

package.json+1 −1 
@@ -1,6 +1,6 @@11 {22   "name": "peach",3-  "version": "2.11.10",3+  "version": "2.11.11",44   "description": "Zero-knowledge password manager",55   "type": "module",66   "scripts": {

view file

src/popup/styles/popup.css+51 −71 
@@ -4212,99 +4212,79 @@42124212 }42134213 .peach-health-body::-webkit-scrollbar { display: none; }42144214 4215-/* Loading skeleton for the remediation queue — shown while the background4216- * computes the advanced health report on Pro vaults. Shimmer + pulse so the4217- * view doesn't read as "empty/broken" during the (sometimes multi-second)4218- * scan. */4219-.peach-health-skeleton {4215+/* Loading screen for the Vault Health view. The advanced report computation4216+ * can run for a few seconds on a large vault — without a clear loading4217+ * screen the surface looked broken (the entry view bleeds through the4218+ * empty body). Centered glyph + title + copy + indeterminate progress bar. */4219+.peach-health-loading-screen {4220+  flex: 1;42204221   display: flex;42214222   flex-direction: column;4222-  gap: 10px;4223-  padding: 14px 16px;4223+  align-items: center;4224+  justify-content: center;4225+  gap: 14px;4226+  padding: 32px 28px;4227+  text-align: center;42244228 }42254229 4226-.peach-health-skeleton-head {4230+.peach-health-loading-glyph {4231+  width: 48px;4232+  height: 48px;42274233   display: flex;42284234   align-items: center;4229-  justify-content: space-between;4230-  margin-bottom: 4px;4235+  justify-content: center;4236+  border-radius: 14px;4237+  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4238+  color: var(--peach-accent);42314239 }42324240 4233-.peach-health-skeleton-title {4234-  font-family: "IBM Plex Mono", monospace;4235-  font-size: 9px;4236-  letter-spacing: 0.16em;4237-  text-transform: uppercase;4238-  color: var(--peach-accent);4239-  opacity: 0.85;4241+.peach-health-loading-title {4242+  margin: 0;4243+  font-family: var(--font-display);4244+  font-style: italic;4245+  font-weight: 300;4246+  font-size: 19px;4247+  line-height: 1.2;4248+  color: var(--peach-t0);42404249 }42414250 4242-.peach-health-skeleton-meta {4243-  font-family: "IBM Plex Mono", monospace;4244-  font-size: 10px;4251+.peach-health-loading-copy {4252+  margin: 0;4253+  max-width: 240px;4254+  font-size: 12px;4255+  line-height: 1.55;42454256   color: var(--peach-t2);4246-  display: inline-flex;4247-  align-items: center;4248-  gap: 6px;42494257 }42504258 4251-.peach-health-skeleton-dot {4252-  width: 6px;4253-  height: 6px;4254-  border-radius: 50%;4255-  background: var(--peach-accent);4256-  animation: peach-health-skeleton-pulse 1.2s ease-in-out infinite;4259+.peach-health-loading-track {4260+  width: 200px;4261+  height: 3px;4262+  margin-top: 6px;4263+  border-radius: 999px;4264+  background: rgba(240, 232, 216, 0.06);4265+  overflow: hidden;42574266 }42584267 4259-.peach-health-skeleton-row {4260-  display: flex;4261-  align-items: center;4262-  gap: 12px;4263-  padding: 12px;4264-  border-radius: 10px;4265-  background: rgba(0, 0, 0, 0.18);4266-  animation: peach-health-skeleton-pulse 1.6s ease-in-out infinite;4267-}4268-4269-.peach-health-skeleton-row:nth-child(2) { animation-delay: 0.10s; }4270-.peach-health-skeleton-row:nth-child(3) { animation-delay: 0.20s; }4271-.peach-health-skeleton-row:nth-child(4) { animation-delay: 0.30s; }4272-4273-.peach-health-skeleton-bar {4274-  height: 10px;4275-  border-radius: 4px;4268+.peach-health-loading-fill {4269+  width: 40%;4270+  height: 100%;4271+  border-radius: inherit;42764272   background: linear-gradient(42774273     90deg,4278-    rgba(240, 232, 216, 0.04) 0%,4279-    rgba(240, 232, 216, 0.10) 50%,4280-    rgba(240, 232, 216, 0.04) 100%4274+    transparent 0%,4275+    var(--peach-accent) 50%,4276+    transparent 100%42814277   );4282-  background-size: 240% 100%;4283-  animation: peach-health-skeleton-shimmer 1.6s ease-in-out infinite;4278+  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;42844279 }42854280 4286-.peach-health-skeleton-bar--name { width: 55%; }4287-.peach-health-skeleton-bar--meta { width: 40%; height: 7px; opacity: 0.6; margin-top: 6px; }4288-.peach-health-skeleton-bar--cta { width: 90px; height: 26px; border-radius: 6px; flex-shrink: 0; margin-left: auto; }4289-4290-.peach-health-skeleton-row > div:first-child {4291-  flex: 1;4292-  min-width: 0;4281+@keyframes peach-health-loading-sweep {4282+  0%   { transform: translateX(-100%); }4283+  100% { transform: translateX(350%); }42934284 }42944285 4295-@keyframes peach-health-skeleton-pulse {4296-  0%, 100% { opacity: 0.55; }4297-  50%      { opacity: 1; }4298-}4299-4300-@keyframes peach-health-skeleton-shimmer {4301-  0%   { background-position: 200% 50%; }4302-  100% { background-position: -100% 50%; }4303-}4304-4305-[data-motion="reduce"] .peach-health-skeleton-row,4306-[data-motion="reduce"] .peach-health-skeleton-bar,4307-[data-motion="reduce"] .peach-health-skeleton-dot {4286+[data-motion="reduce"] .peach-health-loading-fill,4287+[data-motion="reduce"] .peach-health-loading-glyph svg path {43084288   animation: none;43094289 }43104290

view file

src/popup/views/Health.tsx+15 −27 
@@ -210,34 +210,22 @@210210 211211         <div class="peach-health-body">212212           <Show when={props.isPro && advancedLoading()}>213-            <div class="peach-health-skeleton" aria-busy="true" aria-live="polite">214-              <div class="peach-health-skeleton-head">215-                <span class="peach-health-skeleton-title">Remediation queue</span>216-                <span class="peach-health-skeleton-meta">217-                  <span class="peach-health-skeleton-dot" aria-hidden="true"></span>218-                  Scanning vault…219-                </span>213+            <div class="peach-health-loading-screen" aria-busy="true" aria-live="polite">214+              <div class="peach-health-loading-glyph" aria-hidden="true">215+                <svg width="32" height="32" viewBox="0 0 32 32" fill="none">216+                  <circle cx="16" cy="16" r="13" stroke="currentColor" stroke-width="1.2" opacity="0.18" />217+                  <path d="M16 3a13 13 0 0 1 13 13" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">218+                    <animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="1.2s" repeatCount="indefinite" />219+                  </path>220+                </svg>220221               </div>221-              <div class="peach-health-skeleton-row">222-                <div>223-                  <div class="peach-health-skeleton-bar peach-health-skeleton-bar--name"></div>224-                  <div class="peach-health-skeleton-bar peach-health-skeleton-bar--meta"></div>225-                </div>226-                <div class="peach-health-skeleton-bar peach-health-skeleton-bar--cta"></div>227-              </div>228-              <div class="peach-health-skeleton-row">229-                <div>230-                  <div class="peach-health-skeleton-bar peach-health-skeleton-bar--name"></div>231-                  <div class="peach-health-skeleton-bar peach-health-skeleton-bar--meta"></div>232-                </div>233-                <div class="peach-health-skeleton-bar peach-health-skeleton-bar--cta"></div>234-              </div>235-              <div class="peach-health-skeleton-row">236-                <div>237-                  <div class="peach-health-skeleton-bar peach-health-skeleton-bar--name"></div>238-                  <div class="peach-health-skeleton-bar peach-health-skeleton-bar--meta"></div>239-                </div>240-                <div class="peach-health-skeleton-bar peach-health-skeleton-bar--cta"></div>222+              <h2 class="peach-health-loading-title">Checking your vault's health</h2>223+              <p class="peach-health-loading-copy">224+                Scanning for reused, breached, weak, and aging credentials.225+                Just a moment…226+              </p>227+              <div class="peach-health-loading-track" aria-hidden="true">228+                <div class="peach-health-loading-fill"></div>241229               </div>242230             </div>243231           </Show>

view file