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:
1 parent
c2ff4604a6
commit
7121ea4084
2 files changed
+2
-12
No files matched your search
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user