codeflash-admin/codeflash-internal
1
0
Fork 0
mirror of https://github.com/codeflash-ai/codeflash-internal.git synced 2026-05-04 18:25:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: remove scroll-triggered CSS transitions causing jank in observability timeline

Browse source 
Reduce IntersectionObserver thresholds from 6 to 1, remove backdrop-blur
from sticky header, drop opacity/color/maxHeight transitions that fired
on every activeIndex change, and narrow progress bar to transition-[width].
This commit is contained in:
Kevin Turcios 2026-02-27 10:44:34 -05:00
parent 986688ceca
commit 09fafeb914
3 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
js/cf-webapp/src/app/observability/components/candidate-content.tsx
View file

@ -196,7 +196,7 @@ export const CandidateContent = memo(function CandidateContent({
</span>
</div>
<div
className="overflow-y-auto transition-all duration-500 ease-out"
className="overflow-y-auto"
style={codeContainerStyle}
>
<CodeHighlighter language={selectedCandidateFile.language} code={selectedCandidateFile.code} customStyle={CODE_STYLE} />
@ -210,7 +210,7 @@ export const CandidateContent = memo(function CandidateContent({
) : viewMode === "side-by-side" ? (
matchingOriginalFile && selectedCandidateFile ? (
<div
className="rounded-md border border-zinc-200 dark:border-zinc-700 overflow-hidden overflow-y-auto transition-all duration-500"
className="rounded-md border border-zinc-200 dark:border-zinc-700 overflow-hidden overflow-y-auto"
style={codeContainerStyle}
>
<SideBySideDiffView
@ -234,7 +234,7 @@ export const CandidateContent = memo(function CandidateContent({
</div>
) : unifiedDiff ? (
<div
className="rounded-md border border-zinc-200 dark:border-zinc-700 overflow-hidden overflow-y-auto transition-all duration-500"
className="rounded-md border border-zinc-200 dark:border-zinc-700 overflow-hidden overflow-y-auto"
style={codeContainerStyle}
>
<DiffView diff={unifiedDiff} />

6
js/cf-webapp/src/app/observability/components/timeline-page-view.tsx
View file

@ -90,7 +90,7 @@ export const TimelinePageView = memo(function TimelinePageView({
},
{
root,
threshold: [0, 0.1, 0.25, 0.5, 0.75, 1.0],
threshold: [0.5],
rootMargin: "-10% 0px -55% 0px",
}
)
@ -157,7 +157,7 @@ export const TimelinePageView = memo(function TimelinePageView({
)
const header = (
<div className={`${chatOpen ? "flex-shrink-0" : "sticky top-0"} z-30 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-sm border-b border-zinc-200 dark:border-zinc-700`}>
<div className={`${chatOpen ? "flex-shrink-0" : "sticky top-0"} z-30 bg-white dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700`}>
<div className="max-w-6xl mx-auto px-4 py-3">
<div className="flex items-center justify-between mb-2">
<div>
@ -194,7 +194,7 @@ export const TimelinePageView = memo(function TimelinePageView({
<div className="h-1 bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden">
<div
className="h-full bg-zinc-400 dark:bg-zinc-500 transition-all duration-200"
className="h-full bg-zinc-400 dark:bg-zinc-500 transition-[width] duration-200"
style={{ width: `${((activeIndex + 1) / sections.length) * 100}%` }}
/>
</div>

4
js/cf-webapp/src/app/observability/components/timeline-section-card.tsx
View file

@ -43,7 +43,7 @@ export const TimelineSectionCard = memo(function TimelineSectionCard({
return (
<div
className={`relative transition-opacity duration-200 ${
className={`relative ${
isActive ? "opacity-100" : "opacity-60"
}`}
>
@ -69,7 +69,7 @@ export const TimelineSectionCard = memo(function TimelineSectionCard({
</div>
<div
className={`rounded-md border overflow-hidden transition-colors duration-200 ${
className={`rounded-md border overflow-hidden ${
isActive
? "border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800"
: "border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50"