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

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

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