From 4a2e633d4996a7453af22df409bf44b71346eac9 Mon Sep 17 00:00:00 2001 From: Archan Datta Date: Wed, 14 Jan 2026 13:09:29 +0000 Subject: [PATCH 1/2] feat: add kernel logo loading spinner when browser lanches --- .../client/src/assets/styles/_variables.scss | 2 +- .../client/src/components/about.vue | 37 ++++++------------- .../client/src/components/connect.vue | 37 ++++++------------- 3 files changed, 23 insertions(+), 53 deletions(-) diff --git a/images/chromium-headful/client/src/assets/styles/_variables.scss b/images/chromium-headful/client/src/assets/styles/_variables.scss index f74ac679..1724d3e2 100644 --- a/images/chromium-headful/client/src/assets/styles/_variables.scss +++ b/images/chromium-headful/client/src/assets/styles/_variables.scss @@ -21,7 +21,7 @@ $background-modifier-accent: hsla(0, 0%, 100%, 0.06); $elevation-low: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05); $elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24); -$style-primary: #19bd9c; +$style-primary: #8B5CF6; $style-error: #d32f2f; $menu-height: 40px; diff --git a/images/chromium-headful/client/src/components/about.vue b/images/chromium-headful/client/src/components/about.vue index 96a710ec..a0989c41 100644 --- a/images/chromium-headful/client/src/components/about.vue +++ b/images/chromium-headful/client/src/components/about.vue @@ -3,8 +3,7 @@
-
-
+
@@ -85,25 +84,14 @@ height: 90px; position: relative; margin: 0 auto 20px auto; + display: flex; + justify-content: center; + align-items: center; - .bounce1, - .bounce2 { + .kernel-logo { width: 100%; height: 100%; - border-radius: 50%; - background-color: $style-primary; - opacity: 0.6; - position: absolute; - top: 0; - left: 0; - - -webkit-animation: bounce 2s infinite ease-in-out; - animation: bounce 2s infinite ease-in-out; - } - - .bounce2 { - -webkit-animation-delay: -1s; - animation-delay: -1s; + animation: spin 1s linear infinite; } } } @@ -114,15 +102,12 @@ } } - @keyframes bounce { - 0%, - 100% { - transform: scale(0); - -webkit-transform: scale(0); + @keyframes spin { + from { + transform: rotate(0deg); } - 50% { - transform: scale(1); - -webkit-transform: scale(1); + to { + transform: rotate(360deg); } } diff --git a/images/chromium-headful/client/src/components/connect.vue b/images/chromium-headful/client/src/components/connect.vue index c850c642..a4dead7f 100644 --- a/images/chromium-headful/client/src/components/connect.vue +++ b/images/chromium-headful/client/src/components/connect.vue @@ -11,8 +11,7 @@
-
-
+
@@ -105,38 +104,24 @@ height: 90px; position: relative; margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; - .bounce1, - .bounce2 { + .kernel-logo { width: 100%; height: 100%; - border-radius: 50%; - background-color: $style-primary; - opacity: 0.6; - position: absolute; - top: 0; - left: 0; - - -webkit-animation: bounce 2s infinite ease-in-out; - animation: bounce 2s infinite ease-in-out; - } - - .bounce2 { - -webkit-animation-delay: -1s; - animation-delay: -1s; + animation: spin 1s linear infinite; } } } - @keyframes bounce { - 0%, - 100% { - transform: scale(0); - -webkit-transform: scale(0); + @keyframes spin { + from { + transform: rotate(0deg); } - 50% { - transform: scale(1); - -webkit-transform: scale(1); + to { + transform: rotate(360deg); } } } From 32adaa4a648ca2a30086235a47613a0a5784e382 Mon Sep 17 00:00:00 2001 From: Archan Datta Date: Wed, 14 Jan 2026 13:36:58 +0000 Subject: [PATCH 2/2] review --- .../client/src/assets/styles/_variables.scss | 2 +- .../client/src/components/about.vue | 12 +++++++--- .../client/src/components/connect.vue | 24 ++++++++++++------- 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/images/chromium-headful/client/src/assets/styles/_variables.scss b/images/chromium-headful/client/src/assets/styles/_variables.scss index 1724d3e2..d487a952 100644 --- a/images/chromium-headful/client/src/assets/styles/_variables.scss +++ b/images/chromium-headful/client/src/assets/styles/_variables.scss @@ -21,7 +21,7 @@ $background-modifier-accent: hsla(0, 0%, 100%, 0.06); $elevation-low: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05); $elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24); -$style-primary: #8B5CF6; +$style-primary: #8b5cf6; $style-error: #d32f2f; $menu-height: 40px; diff --git a/images/chromium-headful/client/src/components/about.vue b/images/chromium-headful/client/src/components/about.vue index a0989c41..32d4e80d 100644 --- a/images/chromium-headful/client/src/components/about.vue +++ b/images/chromium-headful/client/src/components/about.vue @@ -3,7 +3,7 @@
- +
@@ -91,7 +91,13 @@ .kernel-logo { width: 100%; height: 100%; - animation: spin 1s linear infinite; + animation: kernel-logo-spin 1s linear infinite; + } + + @media (prefers-reduced-motion: reduce) { + .kernel-logo { + animation: none; + } } } } @@ -102,7 +108,7 @@ } } - @keyframes spin { + @keyframes kernel-logo-spin { from { transform: rotate(0deg); } diff --git a/images/chromium-headful/client/src/components/connect.vue b/images/chromium-headful/client/src/components/connect.vue index a4dead7f..ab3f3657 100644 --- a/images/chromium-headful/client/src/components/connect.vue +++ b/images/chromium-headful/client/src/components/connect.vue @@ -11,7 +11,7 @@
- +
@@ -111,18 +111,24 @@ .kernel-logo { width: 100%; height: 100%; - animation: spin 1s linear infinite; + animation: kernel-logo-spin 1s linear infinite; + } + + @media (prefers-reduced-motion: reduce) { + .kernel-logo { + animation: none; + } } } } + } - @keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } + @keyframes kernel-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); } }