Client Freeze (FAForever#1597)

Fixes FAForever#1578
mrchris2000 · Apr 15, 2022 · fd5b484 · fd5b484
1 parent 3c2bcef
commit fd5b484
Showing 1 changed file with 16 additions and 52 deletions.
diff --git a/src/main/resources/theme/tournaments/tournament_detail.html b/src/main/resources/theme/tournaments/tournament_detail.html
@@ -30,69 +30,33 @@ <h1>{name}</h1>
 <div id="imageLoadingDiv">
   <style>
     .loader {
-      width: 100px;
-      height: 100px;
+      width: 50px;
+      height: 50px;
     }
 
-    .circular{
-      animation: rotate 2s linear infinite;
-      height: 100px;
-      position: relative;
-      width: 100px;
-    }
-
-    .path {
-      stroke-dasharray: 1px,200px;
-      stroke-dashoffset: 0;
-      animation:
-          dash 1.5s ease-in-out infinite,
-          color 6s ease-in-out infinite
-    ;
-      stroke-linecap: round;
+    .loader {
+      border: 8px solid transparent;
+      border-top: 8px solid #009688;
+      border-radius: 50%;
+      width: 60px;
+      height: 60px;
+      animation: spin 2s linear infinite;
     }
 
-    @keyframes rotate{
-      100%{
-        transform: rotate(360deg);
-      }
-    }
-    @keyframes dash{
-      0%{
-        stroke-dasharray: 1px,200px;
-        stroke-dashoffset: 0;
-      }
-      50%{
-        stroke-dasharray: 89px,200px;
-        stroke-dashoffset: -35;
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
       }
-      100%{
-        stroke-dasharray: 89px,200px;
-        stroke-dashoffset: -124;
-      }
-    }
-    @keyframes color{
-      100%, 0%{
-        stroke: #d62d20;
-      }
-      40%{
-        stroke: #0057e7;
-      }
-      66%{
-        stroke: #008744;
-      }
-      80%, 90%{
-        stroke: #ffa700;
+      100% {
+        transform: rotate(360deg);
       }
     }
   </style>
-  <div class="loader">
-    <svg class="circular">
-      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
-    </svg>
+  <div class="loader" id="loader">
   </div>
 </div>
 
-<img src="{tournament-image}" class="slow-image" onload="document.getElementById('imageLoadingDiv').style.display='none'">
+<img class="slow-image" onload="document.getElementById('loader').style.display='none'" src="{tournament-image}">
 
 </body>
 </html>