perf: remove animated logo from idle and loading surfaces
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user