Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use performance instead of settimeout for splitter animation

This commit is contained in:
Nate Kelley 2025-01-24 11:14:49 -07:00
parent 975f5a1011
commit ff81539cb9
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
1 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/src/components/layout/AppSplitter/AppSplitter.tsx
View File

@ -174,27 +174,33 @@ export const AppSplitter = React.memo(
// Calculate current percentage considering 'auto' cases // Calculate current percentage considering 'auto' cases
const currentSizeNumber = getCurrentSizePercentage(currentSize, otherSize, container); const currentSizeNumber = getCurrentSizePercentage(currentSize, otherSize, container);
const NUMBER_OF_STEPS = 24; await new Promise((resolve) => {
const stepDuration = (duration * 1000) / NUMBER_OF_STEPS; const startTime = performance.now();
const endTime = startTime + duration * 1000;
for (let i = 0; i < NUMBER_OF_STEPS + 1; i++) { const animate = (currentTime: number) => {
await new Promise((resolve) => const elapsedTime = currentTime - startTime;
setTimeout(() => { const progress = Math.min(elapsedTime / (duration * 1000), 1);
const progress = i / NUMBER_OF_STEPS;
const easedProgress = easeInOutCubic(progress);
const newSizeNumber =
currentSizeNumber + (targetPercentage - currentSizeNumber) * easedProgress;
const newSize = `${newSizeNumber}%`; const easedProgress = easeInOutCubic(progress);
const otherSize = `${100 - newSizeNumber}%`; const newSizeNumber =
currentSizeNumber + (targetPercentage - currentSizeNumber) * easedProgress;
const newSizes = side === 'left' ? [newSize, otherSize] : [otherSize, newSize]; const newSize = `${newSizeNumber}%`;
const otherSize = `${100 - newSizeNumber}%`;
setSplitSizes(newSizes); const newSizes = side === 'left' ? [newSize, otherSize] : [otherSize, newSize];
setSplitSizes(newSizes);
if (currentTime < endTime) {
requestAnimationFrame(animate);
} else {
resolve(true); resolve(true);
}, stepDuration) }
); };
}
requestAnimationFrame(animate);
});
} }
); );