LoadingSignal 升级:换用新品牌 logo,明亮简洁蓝色旋转动画
logo 改用 apple-touch-icon,spinner 改为蓝色渐变环 + 微光晕 + cubic-bezier 缓动曲线,整体更轻盈现代。 同时 ScanTerminalScreen 加载态接入 ScanTerminalLoadingScreen。
This commit is contained in:
@@ -56,6 +56,8 @@ import {
|
|||||||
useScanTerminalTheme,
|
useScanTerminalTheme,
|
||||||
useUserLocalClock,
|
useUserLocalClock,
|
||||||
} from "@/components/dashboard/scan-terminal/use-scan-terminal-ui-state";
|
} from "@/components/dashboard/scan-terminal/use-scan-terminal-ui-state";
|
||||||
|
import { ScanTerminalLoadingScreen } from "@/components/dashboard/scan-terminal/ScanTerminalShellParts";
|
||||||
|
import { scanRootClass } from "@/components/dashboard/scan-root-styles";
|
||||||
import { useRelativeTime } from "@/hooks/useRelativeTime";
|
import { useRelativeTime } from "@/hooks/useRelativeTime";
|
||||||
|
|
||||||
function createEmptyAccess(loading = true): ProAccessState {
|
function createEmptyAccess(loading = true): ProAccessState {
|
||||||
@@ -1165,7 +1167,7 @@ function ScanTerminalScreen() {
|
|||||||
const isPro =
|
const isPro =
|
||||||
hydrated && (proAccess.subscriptionActive || canUseLocalFullAccess);
|
hydrated && (proAccess.subscriptionActive || canUseLocalFullAccess);
|
||||||
const userLocalTime = useUserLocalClock();
|
const userLocalTime = useUserLocalClock();
|
||||||
useScanTerminalTheme();
|
const { themeMode } = useScanTerminalTheme();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
@@ -1253,11 +1255,12 @@ function ScanTerminalScreen() {
|
|||||||
|
|
||||||
if (!hydrated || (proAccess.loading && !canUseLocalFullAccess)) {
|
if (!hydrated || (proAccess.loading && !canUseLocalFullAccess)) {
|
||||||
return (
|
return (
|
||||||
<div className="grid h-screen w-full place-items-center bg-[#e9edf3]">
|
<ScanTerminalLoadingScreen
|
||||||
<div className="rounded border border-slate-300 bg-white px-5 py-4 text-sm font-bold text-slate-600 shadow-sm">
|
isEn={isEn}
|
||||||
Loading paid terminal...
|
rootClassName={scanRootClass}
|
||||||
</div>
|
themeMode={themeMode}
|
||||||
</div>
|
userLocalTime={userLocalTime}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -124,8 +124,8 @@
|
|||||||
|
|
||||||
.root :global(.scan-loading-spinner-wrapper) {
|
.root :global(.scan-loading-spinner-wrapper) {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 90px;
|
width: 96px;
|
||||||
height: 90px;
|
height: 96px;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@@ -134,17 +134,19 @@
|
|||||||
.root :global(.scan-loading-spinner-ring) {
|
.root :global(.scan-loading-spinner-ring) {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
border: 1.5px solid transparent;
|
border: 2px solid transparent;
|
||||||
border-top-color: var(--color-text-primary);
|
border-top-color: #3b82f6;
|
||||||
border-right-color: var(--color-text-primary);
|
border-right-color: #60a5fa;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: scan-loading-spin 1s linear infinite;
|
animation: scan-loading-spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||||
|
box-shadow: 0 0 12px rgba(59, 130, 246, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.root :global(.scan-loading-spinner-logo) {
|
.root :global(.scan-loading-spinner-logo) {
|
||||||
width: 44px;
|
width: 48px;
|
||||||
height: 44px;
|
height: 48px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root :global(.scan-loading-copy-block) {
|
.root :global(.scan-loading-copy-block) {
|
||||||
|
|||||||
@@ -18,12 +18,9 @@ export function LoadingSignal({
|
|||||||
<div className="scan-loading-spinner-wrapper" aria-hidden="true">
|
<div className="scan-loading-spinner-wrapper" aria-hidden="true">
|
||||||
<div className="scan-loading-spinner-ring" />
|
<div className="scan-loading-spinner-ring" />
|
||||||
<img
|
<img
|
||||||
src="/static/logo.png"
|
src="/apple-touch-icon.png"
|
||||||
alt="PolyWeather"
|
alt="PolyWeather"
|
||||||
className="scan-loading-spinner-logo"
|
className="scan-loading-spinner-logo"
|
||||||
onError={(e) => {
|
|
||||||
(e.target as HTMLImageElement).src = "/logo.png";
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="scan-loading-copy-block">
|
<div className="scan-loading-copy-block">
|
||||||
|
|||||||
Reference in New Issue
Block a user