fix: prevent layout shift when starting counting

bfintal · Aug 4, 2021 · dae2d0e · dae2d0e
1 parent e11dc19
commit dae2d0e
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/index.js b/index.js
@@ -27,12 +27,12 @@ const counterUp = ( el, options = {} ) => {
 	el._countUpOrigInnerHTML = el.innerHTML
 
 	// Start counting.
-	el.innerHTML = nums[ 0 ]
+	el.innerHTML = nums[ 0 ] || '&nbsp;' // Use a non-breaking space to prevent layout shift.
 	el.style.visibility = 'visible'
 
 	// Function for displaying output with the set time and delay.
 	const output = function() {
-		el.innerHTML = nums.shift()
+		el.innerHTML = nums.shift() || '&nbsp;' // Use a non-breaking space to prevent layout shift.
 		if ( nums.length ) {
 			clearTimeout( el.countUpTimeout )
 			el.countUpTimeout = setTimeout( output, delay )