perf: remove animated logo from idle and loading surfaces

This commit is contained in:
Bohdan Triapitsyn
2026-04-03 16:44:31 +03:00
parent 5045d21821
commit 246464a325
7 changed files with 8 additions and 83 deletions
@@ -64,7 +64,7 @@ const AuthShell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
const LoadingScreen: React.FC = () => (
<div className="flex min-h-screen items-center justify-center bg-background text-foreground">
<OpenChamberLogo width={120} height={120} isAnimated />
<OpenChamberLogo width={120} height={120} />
</div>
);
@@ -1,45 +1,16 @@
import React from 'react';
import { OpenChamberLogo } from '@/components/ui/OpenChamberLogo';
import { TextLoop } from '@/components/ui/TextLoop';
import { useThemeSystem } from '@/contexts/useThemeSystem';
const phrases = [
"Fix the failing tests",
"Refactor this to be more readable",
"Add form validation",
"Optimize this function",
"Write tests for this",
"Explain how this works",
"Add a new feature",
"Help me debug this",
"Review my code",
"Simplify this logic",
"Add error handling",
"Create a new component",
"Update the documentation",
"Find the bug here",
"Improve performance",
"Add type definitions",
];
const ChatEmptyState: React.FC = () => {
const { currentTheme } = useThemeSystem();
// Use theme's muted foreground for secondary text
const textColor = currentTheme?.colors?.surface?.mutedForeground || 'var(--muted-foreground)';
return (
<div className="flex flex-col items-center justify-center min-h-full w-full gap-6">
<OpenChamberLogo width={140} height={140} className="opacity-20" isAnimated />
<TextLoop
className="text-body-md"
interval={4}
transition={{ duration: 0.5 }}
>
{phrases.map((phrase) => (
<span key={phrase} style={{ color: textColor }}>"{phrase}…"</span>
))}
</TextLoop>
<OpenChamberLogo width={140} height={140} className="opacity-20" />
<span className="text-body-md" style={{ color: textColor }}>Start a new chat</span>
</div>
);
};
@@ -18,7 +18,7 @@ export const ConfigUpdateOverlay: React.FC = () => {
return (
<div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center gap-6 backdrop-blur-md">
<OpenChamberLogo width={80} height={80} isAnimated />
<OpenChamberLogo width={80} height={80} />
<p className="typography-body text-muted-foreground">
{message}
</p>
@@ -81,7 +81,6 @@ export const OpenChamberLogo: React.FC<OpenChamberLogoProps> = ({
className = '',
width = 70,
height = 70,
isAnimated = false,
}) => {
const themeContext = useOptionalThemeSystem();
@@ -192,23 +191,6 @@ export const OpenChamberLogo: React.FC<OpenChamberLogoProps> = ({
role="img"
aria-label="OpenChamber logo"
>
<style>{`
@keyframes openchamber-logo-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.openchamber-logo-pulse {
animation: openchamber-logo-pulse 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.openchamber-logo-pulse {
animation: none;
}
}
`}</style>
{/* Left face - base fill */}
<path
d={`M${center.x} ${center.y} L${left.x} ${left.y} L${bottomLeft.x} ${bottomLeft.y} L${bottom.x} ${bottom.y} Z`}
@@ -257,7 +239,7 @@ export const OpenChamberLogo: React.FC<OpenChamberLogoProps> = ({
/>
{/* OpenCode logo on top face */}
<g className={isAnimated ? 'openchamber-logo-pulse' : undefined} opacity={1}>
<g opacity={1}>
{/*
Isometric transform for top face:
OpenCode logo (32x40 viewBox) centered and projected to isometric plane