From fcec848725688b50209acc6395e8f546fd4f8ae4 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <ste.pigozzi@gmail.com>
Date: Wed, 2 Oct 2019 18:47:00 +0200
Subject: [PATCH] Add loading animation

---
 extension/gdpr_page.css | 92 +++++++++++++++++++++++++++++++++++++----
 extension/gdpr_page.js  | 15 ++-----
 2 files changed, 89 insertions(+), 18 deletions(-)

diff --git a/extension/gdpr_page.css b/extension/gdpr_page.css
index b88ba57..a63268d 100644
--- a/extension/gdpr_page.css
+++ b/extension/gdpr_page.css
@@ -1,17 +1,95 @@
 .chakramagic-button {
     vertical-align: middle;
-    padding: 0; 
-    border: 1px solid black;
-    background-color: black;
+    padding: 1px;
+    background: black;
     cursor: pointer;
+    border: none;
 }
 
-.chakramagic-button:not([disabled]):hover {
-    border: 1px solid gray;
+.chakramagic-button:not(.chakramagic-running):hover {
+    background: grey;
 }
 
-.chakramagic-button:not([disabled]):active {
-    border: 1px solid white;
+.chakramagic-button:not(.chakramagic-running):active {
+    background: white;
+}
+
+@keyframes running {
+    0% {
+        background: linear-gradient(0deg, orangered, yellow);
+    }
+
+    6.25% {
+        background: linear-gradient(22.5deg, orangered, yellow);
+    }
+    
+    12.5% {
+        background: linear-gradient(45deg, orangered, yellow);
+    }
+
+    18.75% {
+        background: linear-gradient(67.5deg, orangered, yellow);
+    }
+
+    25% {
+        background: linear-gradient(90deg, orangered, yellow);
+    }
+
+    31.25% {
+        background: linear-gradient(112.5deg, orangered, yellow);
+    }
+
+    37.5% {
+        background: linear-gradient(135deg, orangered, yellow);
+    }
+    
+    43.75% {
+        background: linear-gradient(157.5deg, orangered, yellow);
+    }
+
+    50% {
+        background: linear-gradient(180deg, orangered, yellow);
+    }
+    
+    56.25% {
+        background: linear-gradient(202.5deg, orangered, yellow);
+    }
+
+    62.5% {
+        background: linear-gradient(225deg, orangered, yellow);
+    }
+    
+    68.75% {
+        background: linear-gradient(247.5deg, orangered, yellow);
+    }
+
+    75% {
+        background: linear-gradient(270deg, orangered, yellow);
+    }
+    
+    81.25% {
+        background: linear-gradient(292.5deg, orangered, yellow);
+    }
+
+    87.5% {
+        background: linear-gradient(315deg, orangered, yellow);
+    }
+    
+    93.75% {
+        background: linear-gradient(337.5deg, orangered, yellow);
+    }
+    
+    100% {
+        background: linear-gradient(-0deg, orangered, yellow);
+    }
+}
+
+.chakramagic-button.chakramagic-running {
+    animation-name: running;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    cursor: wait;
 }
 
 .chakramagic-image {
diff --git a/extension/gdpr_page.js b/extension/gdpr_page.js
index d925753..8c62f8c 100644
--- a/extension/gdpr_page.js
+++ b/extension/gdpr_page.js
@@ -1,4 +1,6 @@
 function illuminate() {
+    let chakraElement = document.querySelector(".chakramagic-button");
+
     const read_data = () => {
         // Get player name, use this to match it to player name from API response
         const player_name = document.getElementsByClassName("profile_small_header_name")[0].children[0].textContent;
@@ -68,23 +70,14 @@ function illuminate() {
                 }
             }, 100);
         };
-        // Just visual indicator that the script is working
-        const b3 = document.getElementById("personaldata_elements_container");
-        if (!b3) return alert("Data table not found, make sure you are on steam GDPR page");
-        const h1 = document.createElement("h1");
-        const h1text = document.createTextNode("Loading more data ");
-        const h1spinner = document.createElement("img");
-        h1spinner.src = "https://steamcommunity-a.akamaihd.net/public/images/login/throbber.gif";
-        h1.appendChild(h1text);
-        h1.appendChild(h1spinner);
-        b3.insertBefore(h1, b3.childNodes[0]);
+        
         // Start checking loop
         watch_load_more();
     };
 
-    let chakraElement = document.querySelector(".chakramagic-button");
     chakraElement.setAttribute("disabled", "");
     chakraElement.setAttribute("onclick", "");
+    chakraElement.setAttribute("class", "chakramagic-button chakramagic-running")
 
     load_all_data();
 }