Add animation to refresh segments

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

src/content.ts

@@ -123,7 +123,7 @@ const manualSkipPercentCount = 0.5;
 //get messages from the background script and the popup
 chrome.runtime.onMessage.addListener(messageListener);
   
-function messageListener(request: Message, sender: unknown, sendResponse: (response: MessageResponse) => void): void {
+async function messageListener(request: Message, sender: unknown, sendResponse: (response: MessageResponse) => void): Promise<void> {
     //messages from popup script
     switch(request.message){
         case "update":
@@ -179,7 +179,8 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
             submitSponsorTimes();
             break;
         case "refreshSegments":
-            sponsorsLookup(sponsorVideoID, false);
+            await sponsorsLookup(sponsorVideoID, false);
+            sendResponse({});
             break;
     }
 }
@@ -594,9 +595,10 @@ async function sponsorsLookup(id: string, keepOldSubmissions = true) {
 
     // Check for hashPrefix setting
     const hashPrefix = (await utils.getHash(id, 1)).substr(0, 4);
-    utils.asyncRequestToServer('GET', "/api/skipSegments/" + hashPrefix, {
+    const response = await utils.asyncRequestToServer('GET', "/api/skipSegments/" + hashPrefix, {
         categories
-    }).then(async (response: FetchResponse) => {
+    });
+
     if (response?.ok) {
         const recievedSegments: SponsorTime[] = JSON.parse(response.responseText)
                     ?.filter((video) => video.videoID === id)
@@ -668,7 +670,6 @@ async function sponsorsLookup(id: string, keepOldSubmissions = true) {
 
         sponsorLookupRetries++;
     }
-    });
 }
 
 function retryFetch(): void {

src/messageTypes.ts

@@ -53,5 +53,6 @@ export type MessageResponse =
     | GetVideoIdResponse
     | GetChannelIDResponse
     | SponsorStartResponse
-    | IsChannelWhitelistedResponse;
+    | IsChannelWhitelistedResponse
+    | Record<string, never>;
 

src/popup.ts

@@ -679,13 +679,28 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     }
 
     function refreshSegments() {
+        PageElements.refreshSegmentsButton.style.animation = "rotate 0.3s 0s infinite";
+
         messageHandler.query({
             active: true,
             currentWindow: true
         }, tabs => {
             messageHandler.sendMessage(
                 tabs[0].id,
-                {message: 'refreshSegments'}
+                {message: 'refreshSegments'},
+                () => {
+                    // 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);
+                }
             )}
         );
     }