modified tthe throbber

ubyssey · Dec 4, 2024 · b415174 · b415174
1 parent ba91fbf
commit b415174
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 10 deletions.
diff --git a/infinitefeed/templates/infinitefeed/infinitefeed.html b/infinitefeed/templates/infinitefeed/infinitefeed.html
@@ -35,5 +35,5 @@
 
 
   <div id="loader" class="hide" {% if inactive %}inactive="True"{%endif%}>
-    <ion-icon name="refresh" class="spin"></ion-icon>
+    <img src="{% static '/ubyssey/images/throbber.svg' %}" class="spin" alt="Loading icon">
   </div>
diff --git a/ubyssey/static_src/src/images/throbber.svg b/ubyssey/static_src/src/images/throbber.svg
diff --git a/ubyssey/static_src/src/js/components/Events/calendar.jsx b/ubyssey/static_src/src/js/components/Events/calendar.jsx
@@ -8,7 +8,6 @@ import {
 } from "react-router-dom";
 // import ReactDOM from 'react-dom';
 import axios from "axios";
-import { RotatingLines } from "react-loader-spinner";
 
 const BP_DESKTOP_SIZE = 1199;
 
@@ -969,15 +968,26 @@ function EventInfoBox({event}) {
     );
 }
 
-function LoaderComponent({width}) {
+function LoaderComponent({ width }) {
     return (
         <div className="loader">
-            <RotatingLines
-                strokeColor="grey"
-                strokeWidth="5"
-                width={width}
-                visible={true}
-            />
+            <svg width={width} height="40" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <style>
+                    {`
+                    .spinner_ajPY {
+                        transform-origin: center;
+                        animation: spinner_AtaB 0.75s infinite linear;
+                    }
+                    @keyframes spinner_AtaB {
+                        100% {
+                        transform: rotate(360deg);
+                        }
+                    }
+                    `}
+                </style>
+                <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/>
+                <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" className="spinner_ajPY"/>
+            </svg>
         </div>
     );
 }
diff --git a/ubyssey/templates/404.html b/ubyssey/templates/404.html
@@ -24,7 +24,9 @@ <h2>Page Not Found</h2>
             <p>The page you have searched is not available.</p>
             <p>Questions? Contact EMAIL: <a class="email-link"
                     href="mailto:webmaster@ubyssey.ca">webmaster@ubyssey.ca</a></p>
-            <h2 class="load-articles"><ion-icon name="refresh" class="spin"></ion-icon></h2>
+            <h2 class="load-articles">
+                <img src="{% static '/ubyssey/images/throbber.svg' %}" class="spin" alt="Loading icon">
+            </h2>
 
             <div id="feed"></div>
             <script src="{% static 'ubyssey/js/error_page.js' %}" type="text/javascript"></script>