Fix scanline animation race condition in AnalyzeStage (#51)

Renamed the keyframes in `AnalyzeStage.tsx` to `scanline-analyze` to prevent conflict with the global `scanline` animation.
Also removed unused `scanline` keyframes from `RefineStage.tsx` to avoid potential future conflicts.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
This commit is contained in:
google-labs-jules[bot] authored and GitHub committed 2026-02-19 15:53:25 +08:00
1 parent c2ff4604a6
commit 7121ea4084
2 files changed
+2 -12

No files matched your search

+2 -2
View File
@@ -17,7 +17,7 @@ export const AnalyzeStage: React.FC<AnalyzeStageProps> = ({ imageSrc, isAnalyzin
{/* Scan Line Animation (only when analyzing) */}
{isAnalyzing && (
<div className="absolute inset-0 pointer-events-none z-20 overflow-hidden">
<div className="w-full h-[2px] bg-cyan-400 shadow-[0_0_20px_rgba(34,211,238,0.8)] animate-[scanline_2s_linear_infinite]"></div>
<div className="w-full h-[2px] bg-cyan-400 shadow-[0_0_20px_rgba(34,211,238,0.8)] animate-[scanline-analyze_2s_linear_infinite]"></div>
</div>
)}
@@ -32,7 +32,7 @@ export const AnalyzeStage: React.FC<AnalyzeStageProps> = ({ imageSrc, isAnalyzin
</div>
</div>
<style>{`
@keyframes scanline {
@keyframes scanline-analyze {
0% {
transform: translateY(-100%);
}
@@ -153,16 +153,6 @@ export const RefineStage: React.FC<RefineStageProps> = ({
</div>
)}
<style>{`
@keyframes scanline {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(400px);
}
}
`}</style>
</div>
)
}