Load release list only when needed

Author: GuillaumeGomez

src/web/crate_details.rs

@@ -373,6 +373,38 @@ pub(crate) async fn crate_details_handler(
     Ok(res.into_response())
 }
 
+#[tracing::instrument]
+pub(crate) async fn get_all_releases(
+    Path(params): Path<CrateDetailHandlerParams>,
+    Extension(pool): Extension<Pool>,
+) -> AxumResult<axum::extract::Json<Vec<Release>>> {
+    let releases: Vec<Release> = spawn_blocking({
+        let pool = pool.clone();
+        let params = params.clone();
+        move || {
+            let mut conn = pool.get()?;
+            let query = "
+            SELECT
+                crates.id AS crate_id
+            FROM crates
+            WHERE crates.name = $1;";
+
+            let rows = conn.query(query, &[&params.name])?;
+
+            let result = if rows.is_empty() {
+                return Ok(Vec::new());
+            } else {
+                &rows[0]
+            };
+            // get releases, sorted by semver
+            releases_for_crate(&mut *conn, result.get("crate_id"))
+        }
+    })
+    .await?;
+
+    Ok(axum::extract::Json(releases))
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;

src/web/routes.rs

@@ -167,6 +167,10 @@ pub(super) fn build_axum_routes() -> AxumRouter {
             "/crate/:name",
             get_internal(super::crate_details::crate_details_handler),
         )
+        .route(
+            "/:name/releases",
+            get_internal(super::crate_details::get_all_releases),
+        )
         .route_with_tsr(
             "/crate/:name/:version",
             get_internal(super::crate_details::crate_details_handler),

static/menu.js

@@ -5,6 +5,37 @@ const updateMenuPositionForSubMenu = (currentMenuSupplier) => {
     subMenu?.style.setProperty('--menu-x', `${currentMenu.getBoundingClientRect().x}px`);
 }
 
+let loadReleases = function() {
+    const crate_name = window.location.pathname.split('/')[1];
+    const xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function() {
+        if (xhttp.readyState !== XMLHttpRequest.DONE) {
+          return;
+        }
+        if (xhttp.status === 200) {
+            const data = JSON.parse(xhttp.responseText);
+            const currentPath = window.location.pathname.split('/');
+            const releases = [];
+            for (const release of data) {
+                currentPath[2] = release.version;
+                releases.push(`\
+<li class="pure-menu-item">
+    <a href="${currentPath.join('/')}" rel="nofollow" class="pure-menu-link">${release["version"]}</a>
+</li>`);
+            }
+            document.getElementById('releases-list').innerHTML = `\
+<ul class="pure-menu-list">${releases.join('')}</ul>`;
+        } else {
+            console.error(`Failed to load release list: [${xhttp.status}] ${xhttp.responseText}`);
+            document.getElementById('releases-list').innerHTML = "Failed to load release list";
+        }
+    };
+    xhttp.open("GET", `/${crate_name}/releases`, true);
+    xhttp.send();
+    // To prevent reloading the list unnecessarily.
+    loadReleases = function() {};
+};
+
 // Allow menus to be open and used by keyboard.
 (function() {
     var currentMenu;
@@ -53,6 +84,7 @@ const updateMenuPositionForSubMenu = (currentMenuSupplier) => {
         currentMenu = newMenu;
         newMenu.className += " pure-menu-active";
         backdrop.style.display = "block";
+        loadReleases();
     }
     function menuOnClick(e) {
         if (this.getAttribute("href") != "#") {

templates/rustdoc/topbar.html

@@ -134,11 +134,8 @@
                             <li class="pure-menu-heading">Versions</li>
 
                             <li class="pure-menu-item">
-                                <div class="pure-menu pure-menu-scrollable sub-menu" tabindex="-1">
-                                    <ul class="pure-menu-list">
-                                        {# Display all releases of this crate #}
-                                        {{ macros::releases_list(name=krate.name, releases=krate.releases, target=target, inner_path=inner_path) }}
-                                    </ul>
+                                <div class="pure-menu pure-menu-scrollable sub-menu" id="releases-list" tabindex="-1">
+                                    <span class="rotate">↻</span>
                                 </div>
                             </li>
                         </ul>

templates/style/_navbar.scss

@@ -15,6 +15,15 @@ body {
     padding: 0;
 }
 
+@keyframes rotating_text {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 div.nav-container {
     // Nothing is supposed to be over or hovering the top navbar. Maybe add a few others '('? :)
     z-index: 999;
@@ -324,6 +333,14 @@ div.nav-container {
             }
         }
     }
+
+    #releases-list {
+        .rotate {
+            display: inline-block;
+            font-size: 30px;
+            animation: rotating_text 2s linear infinite;
+        }
+    }
 }
 
 #nav-search {