improved update-button animation

public/elotracker/chart-integration.js

@@ -372,9 +372,14 @@ async function update_leaderboard_entries() {
 		update_leaderboard_elements();
 	})
 
-	function reset_button(button) {
-		button.disabled = false;
+	async function reset_button(button) {
+		await new Promise(r => setTimeout(r,400)); // warten bis ladebalken am ende angekommen ist
+		button.style.setProperty("--button-loading-bar-opacity", `0`);
+		await new Promise(r => setTimeout(r,400)); // warten bis ladebalken verblasst ist
 		button.style.setProperty("--button-loading-bar-width", `0`);
+		await new Promise(r => setTimeout(r,400)); // warten bis ladebalken wieder am anfang angekommen ist
+		button.style.setProperty("--button-loading-bar-opacity", `1`);
+		button.disabled = false;
 		button.classList.remove("button-updating");
 	}
 }

public/elotracker/styles.css

@@ -60,16 +60,18 @@ button.progress-button {
 	position: relative;
 	overflow: hidden;
 	--button-loading-bar-width: 0;
+	--button-loading-bar-opacity: 1;
 }
 button.progress-button::before {
 	content: '';
 	position: absolute;
+	opacity: var(--button-loading-bar-opacity);
 	width: var(--button-loading-bar-width);
 	height: 100%;
 	left: 0;
 	background-color: #294c87;
 	border-radius: 10px;
-	transition: width 400ms ease-out;
+	transition: width 400ms ease-out, opacity 400ms ease-out;
 	z-index: -1;
 }
 button.button-updating svg {