Add animation to copy button

Closes https://github.com/ajayyy/SponsorBlock/issues/796

src/content.ts

@@ -1558,7 +1558,7 @@ function submitSponsorTimes() {
 async function sendSubmitMessage() {
     // Add loading animation
     playerButtons.submit.image.src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker.svg");
-    playerButtons.submit.button.style.animation = "rotate 1s 0s infinite";
+    const stopAnimation = utils.applyLoadingAnimation(playerButtons.submit.button, 1, () => updateEditButtonsOnPlayer());
 
     //check if a sponsor exceeds the duration of the video
     for (let i = 0; i < sponsorTimesSubmitting.length; i++) {
@@ -1590,22 +1590,7 @@ async function sendSubmitMessage() {
     });
 
     if (response.status === 200) {
-        // Handle submission success
+        stopAnimation();
-        const submitButton = playerButtons.submit.button;
-
-        // Make the animation finite
-        submitButton.style.animation = "rotate 1s";
-
-        // When the animation is over, hide the button
-        const animationEndListener = () => {
-            updateEditButtonsOnPlayer();
-
-            submitButton.style.animation = "none";
-
-            submitButton.removeEventListener("animationend", animationEndListener);
-        };
-
-        submitButton.addEventListener("animationend", animationEndListener);
 
         // Remove segments from storage since they've already been submitted
         Config.config.segmentTimes.delete(sponsorVideoID);

src/popup.ts

@@ -431,7 +431,11 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 uuidButton.id = "sponsorTimesCopyUUIDButtonContainer" + UUID;
                 uuidButton.className = "voteButton";
                 uuidButton.src = chrome.extension.getURL("icons/clipboard.svg");
-                uuidButton.addEventListener("click", () => navigator.clipboard.writeText(UUID));
+                uuidButton.addEventListener("click", () => {
+                    navigator.clipboard.writeText(UUID);
+                    const stopAnimation = utils.applyLoadingAnimation(uuidButton, 0.3);
+                    stopAnimation();
+                });
 
                 //add thumbs up, thumbs down and uuid copy buttons to the container
                 voteButtonsContainer.appendChild(upvoteButton);
@@ -679,7 +683,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     }
 
     function refreshSegments() {
-        PageElements.refreshSegmentsButton.style.animation = "rotate 0.3s 0s infinite";
+        const stopAnimation = utils.applyLoadingAnimation(PageElements.refreshSegmentsButton, 0.3);
 
         messageHandler.query({
             active: true,
@@ -688,19 +692,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
             messageHandler.sendMessage(
                 tabs[0].id,
                 {message: 'refreshSegments'},
-                () => {
+                () => stopAnimation()
-                    // Make the animation finite
-                    PageElements.refreshSegmentsButton.style.animation = "rotate 0.3s";
-
-                    // When the animation is over, hide the button
-                    const animationEndListener = () => {
-                        PageElements.refreshSegmentsButton.style.animation = "none";
-
-                        PageElements.refreshSegmentsButton.removeEventListener("animationend", animationEndListener);
-                    };
-
-                    PageElements.refreshSegmentsButton.addEventListener("animationend", animationEndListener);
-                }
             )}
         );
     }

src/utils.ts

@@ -158,6 +158,31 @@ export default class Utils {
         });
     }
 
+    /**
+     * Starts a spinning animation and returns a function to be called when it should be stopped
+     * The callback will be called when the animation is finished 
+     * It waits until a full rotation is complete
+     */
+    applyLoadingAnimation(element: HTMLElement, time: number, callback?: () => void): () => void {
+        element.style.animation = `rotate ${time}s 0s infinite`;
+
+        return () => {
+            // Make the animation finite
+            element.style.animation = `rotate ${time}s`;
+
+            // When the animation is over, hide the button
+            const animationEndListener = () => {
+                if (callback) callback();
+
+                element.style.animation = "none";
+
+                element.removeEventListener("animationend", animationEndListener);
+            };
+
+            element.addEventListener("animationend", animationEndListener);
+        }
+    }
+
     /**
      * Merges any overlapping timestamp ranges into single segments and returns them as a new array.
      */