From b415174d94abff8bc9381961620e1516d73b6dd6 Mon Sep 17 00:00:00 2001
From: Nishim12 <nishimsinghi@gmail.com>
Date: Wed, 4 Dec 2024 19:15:11 +0000
Subject: [PATCH] modified tthe throbber

---
 .../templates/infinitefeed/infinitefeed.html  |  2 +-
 ubyssey/static_src/src/images/throbber.svg    | 15 +++++++++++
 .../src/js/components/Events/calendar.jsx     | 26 +++++++++++++------
 ubyssey/templates/404.html                    |  4 ++-
 4 files changed, 37 insertions(+), 10 deletions(-)
 create mode 100644 ubyssey/static_src/src/images/throbber.svg

diff --git a/infinitefeed/templates/infinitefeed/infinitefeed.html b/infinitefeed/templates/infinitefeed/infinitefeed.html
index 27ab5b928..92c73547f 100644
--- 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>
\ No newline at end of file
diff --git a/ubyssey/static_src/src/images/throbber.svg b/ubyssey/static_src/src/images/throbber.svg
new file mode 100644
index 000000000..4a591162b
--- /dev/null
+++ b/ubyssey/static_src/src/images/throbber.svg
@@ -0,0 +1,15 @@
+<svg width="24" height="24" 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" class="spinner_ajPY"/>
+</svg>
diff --git a/ubyssey/static_src/src/js/components/Events/calendar.jsx b/ubyssey/static_src/src/js/components/Events/calendar.jsx
index 322fdd9f9..e6632d731 100644
--- 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>
     );
 }
\ No newline at end of file
diff --git a/ubyssey/templates/404.html b/ubyssey/templates/404.html
index d7f31dae7..16c85bb9e 100644
--- 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>