add a loading gif when clicking see more on home

templates/home.html

@@ -47,7 +47,7 @@ <h6 class="card-title" id="{{ channel['id'] }}">{{ channel['name'] }}</h6>
             <div class="col-3" id="more-card">
                 <a href="#a" onclick="set_all()">
                     <div class="card noborder">
-                        <img class="card-img-top rounded" src="/static/right.png" alt="Card image cap" load="lazy">
+                        <img class="card-img-top rounded" src="/static/right.png" alt="Card image cap" load="lazy" id="more-img">
                         <div class="card-body card-no-left-right-padding">
                             <h6 class="card-title"> See More </h6>
                         </div>

templates/layout.html

@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.1/css/all.css">
+    <link rel="preload" href="https://media.tenor.com/wpSo-8CrXqUAAAAi/loading-loading-forever.gif" as="image"> 
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&display=swap" rel="stylesheet">
@@ -19,6 +20,7 @@
 
         function set_all(){
             all = true;
+            document.getElementById("more-img").src = "https://media.tenor.com/wpSo-8CrXqUAAAAi/loading-loading-forever.gif";
             update_mini_stats();
         }
         function timeSince(previous) {