Throttle scroll event (#4158)

* Throttle scroll event

This decreases the amount of function calls when scrolling through the documentation website.

* fix themes base

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com>

website/homepage/src/docs/template.html

@@ -144,7 +144,7 @@
       <div class="sub-links hidden" hash="#themes">
         {% for theme in docs["themes"] %}
         {% with obj=theme %}
-        <a class="thinner-link px-4 pl-8 block" href="#{{ obj['name'].lower()}}">{{ obj["name"] }}</a>
+        <a class="thinner-link px-4 pl-8 block" href="#themes-{{ obj['name'].lower()}}">{{ obj["name"] }}</a>
         {% endwith %}
         {% endfor %}
       </div>
@@ -457,6 +457,16 @@ <h3 class="text-4xl font-light my-4" id="python-client">
   <script>{% include 'templates/add_anchors.js' %}</script>
   <script>{% include 'templates/add_copy.js' %}</script>
   <script>
+    const throt = function (cb, timeout, args) {
+      let locked = false;
+      return function () {
+        if (locked) return;
+        locked = true;
+        cb(args);
+        setTimeout(function () { locked = false; }, timeout);
+      }
+    };
+
     const show_demo = (component, demo) => {
       document.querySelectorAll(`#${component} .demo-btn.selected-demo`).forEach(n => n.classList.remove('selected-demo'));
       document.querySelectorAll(`#${component} .demo-content`).forEach(n => n.classList.add('hidden'));
@@ -480,7 +490,8 @@ <h3 class="text-4xl font-light my-4" id="python-client">
       }
     });
 
-    window.addEventListener("scroll", event => {
+
+    function highlightCurrentNavLink() {
       menuBar.classList.remove("hidden");
       let fromTop = window.scrollY;
 
@@ -507,12 +518,12 @@ <h3 class="text-4xl font-light my-4" id="python-client">
           link.classList.remove("current-nav-link");
         }
       });
-
-    });
+    }
+    window.addEventListener("scroll", throt(highlightCurrentNavLink, 300), true);
 
     let mainNavSubLinks = document.querySelectorAll(".navigation .sub-links");
 
-    window.addEventListener("scroll", event => {
+    function toggleSublinksVisibility() {
       let fromTop = window.scrollY;
       mainNavSubLinks.forEach(subLinkDiv => {
         let hash = subLinkDiv.getAttribute('hash');
@@ -529,7 +540,9 @@ <h3 class="text-4xl font-light my-4" id="python-client">
           }
         }
       });
-    });
+    }
+    window.addEventListener("scroll", throt(toggleSublinksVisibility, 300), true);
+
 
     const search = query => {
       if (query.length > 0) {