there's some weird thing. before it starts from "0" it jumps overall text above a bit, not sure why. maybe simply show nothing on zero?: ```let startTime = null;
let overallStartTime = null;
let previousGenerationTime = null;
let isFirstGeneration = true;

function handleProgressBar() {
const progressBarFilled = document.querySelector('.progress-bar-filled');
const currentTime = Date.now();
let secondsPassed = ((currentTime - overallStartTime) / 1000 - 1.5).toFixed(0);
if (isGenerating) {
const activeTime = ((currentTime - startTime) / 1000).toFixed(0);
const numDots = 3; // Number of dots in the animation
const maxDotCount = 3; // Maximum number of dots shown per frame
const dotIndex = Math.floor(activeTime / 2) % numDots;
const dotPattern = '⠿'.repeat(dotIndex + 1) + '⠿'.repeat(maxDotCount - dotIndex - 1);
const binaryTime = convertToBinary(activeTime);
progressBarFilled.innerText = 'processing ' + binaryTime + ' ' + activeTime + ' sec';

} else {
const binaryTime = convertToBinary(secondsPassed);
progressBarFilled.innerText = 'done: ' + secondsPassed + ' sec';
}
}
function convertToBinary(time) {
const binaryDigits = ['⠝', '⠷', '⠾', '⠄', '⠑', '⠭', '⠱', '⠚', '⠆', '⠤'];
let binary = '';
while (time > 0) {
binary = binaryDigits[time % 10] + binary;
time = Math.floor(time / 10);
}
return binary;
}
async function generateImage() {
if (isGenerating || autoQueueActive) {
return;
}
if (galleryArray.length >= totalLimit) {
if (autoSaveEnabled) {
saveAllImages().then(() => {
clearGallery();
});
} else {
clearGallery();
}
return;
}
function updateProgress() {
handleProgressBar();
if (isGenerating) {
requestAnimationFrame(updateProgress);
}
}
function clearGallery() {
galleryArray.length = 0;
updateImageCounter();
bufferContainer.innerHTML = '';
if (autoQueueActive) {
generateInterval = setInterval(generateImage, interval);
}
}
isGenerating = true;
startTime = Date.now();
overallStartTime = Date.now();
updateProgress();```

The reason why the text jumps overall the bit before it starts from “0” is because of the line progressBarFilled.innerText = 'done: ' + secondsPassed + ' sec';.
When the value of secondsPassed reaches 0, the text changes to 'done: 0 sec', which has fewer characters than the previous value. As a result, the overall text container adjusts its width, causing the jump.
One possible solution is to initialize the progressBarFilled.innerText with an empty string or a string with a fixed length, so that the width of the container remains constant, even when the text changes. For example:

progressBarFilled.innerText = ‘done: sec’;

Or you can use an empty string:

progressBarFilled.innerText = 'done: ';

Alternatively, you can consider using a placeholder character (such as a space) for the secondsPassed value of 0 to maintain a consistent length.

no, looks like as its changing its padding or margin and shift from in "processing" to "done" on top. can yu fix that?

To fix the issue of shifting from “processing” to “done” on top, you can update the code as follows:
Replace the line progressBarFilled.innerText = 'done: ' + secondsPassed + ' sec'; with the following code:

progressBarFilled.innerText = ‘done: ’ + secondsPassed.padStart(2, ‘0’) + ’ sec’;

This code will ensure that the secondsPassed value is always displayed with a minimum width of 2 characters, padding it with a ‘0’ if necessary. This will prevent the shifting issue by maintaining a consistent width for the text container.

no, something is wrong with these "else" states when it gets from secondsPassed and zero value to that "progressBarFilled.innerText = 'processing ' + binaryTime + ' ' + activeTime + ' sec';", the text is still jumping, even with a fixed font and centered alignments.