Fix catalog navigation flicker by using url reverse instead of relative paths. Fixes #365

Author: C4ptainCrunch

catalog/templates/catalog/finder.html

@@ -8,7 +8,7 @@
     <nav aria-label="breadcrumb" class="d-none d-md-block">
         <ol class="breadcrumb">
             {% for column in columns %}
-                <li class="breadcrumb-item"><a href="{{ column.category_prefix }}/">{{ column.category.name }}</a></li>
+                <li class="breadcrumb-item"><a href="{{ column.url }}">{{ column.category.name }}</a></li>
             {% endfor %}
         </ol>
     </nav>
@@ -55,7 +55,7 @@ <h5>
                     {{ column.category.name }}
                 </h5>
                 <ul class="p-0" style="list-style: none;">
-                    {% regroup column.children by get_type_display as children_groups %}
+                    {% regroup column.children by category.get_type_display as children_groups %}
                     {% for type in children_groups %}
                         {% if type.grouper != "OTHE" %}
                             <li>
@@ -71,16 +71,16 @@ <h5>
                                 </div>
                             </li>
                         {% endif %}
-                        {% for subcat in type.list %}
+                        {% for child in type.list %}
                             <li>
-                                <a href="{{ column.category_prefix }}/{{ subcat.slug }}"
+                                <a href="{{ child.url }}"
                                    class="text-body text-decoration-none">
                                     <div class="d-flex align-items-center my-1 ">
                                         <div class="flex-shrink-0 px-2 py-1">
 
                                         </div>
                                         <div class="flex-grow-1 hover-underline">
-                                            {{ subcat.better_name|capfirst }}
+                                            {{ child.category.better_name|capfirst }}
                                         </div>
                                     </div>
                                 </a>

catalog/views.py

@@ -109,12 +109,18 @@ def unfollow_all_courses(request):
     return redirect("home")
 
 
+@dataclass
+class ChildCategory:
+    category: Category
+    url: str
+
+
 @dataclass
 class Column:
     category: Category
-    children: list[Category]
+    children: list[ChildCategory]
     depth: int
-    category_prefix: str
+    url: str
 
 
 def finder(request, slugs: str = ""):
@@ -128,29 +134,32 @@ def finder(request, slugs: str = ""):
             raise Http404(f"Invalid category path, {i}")
 
     columns = []
-    max_depth = len(categories)
     for i, category in enumerate(categories):
-        depth = max_depth - i
-        path_list = ["."] + [".."] * (depth - 1)
+        slug_path = "/".join(slug_list[: i + 1])
+        children = category.children.order_by(
+            Case(
+                When(type=Category.CategoryType.BACHELOR, then=Value(0)),
+                When(type=Category.CategoryType.MASTER, then=Value(1)),
+                When(
+                    type=Category.CategoryType.MASTER_SPECIALIZATION,
+                    then=Value(2),
+                ),
+                default=Value(3),
+            ),
+            "name",
+        ).all()
         columns.append(
             Column(
                 category,
-                list(
-                    category.children.order_by(
-                        Case(
-                            When(type=Category.CategoryType.BACHELOR, then=Value(0)),
-                            When(type=Category.CategoryType.MASTER, then=Value(1)),
-                            When(
-                                type=Category.CategoryType.MASTER_SPECIALIZATION,
-                                then=Value(2),
-                            ),
-                            default=Value(3),
-                        ),
-                        "name",
-                    ).all()
-                ),
-                depth,
-                "/".join(path_list),
+                [
+                    ChildCategory(
+                        child,
+                        reverse("catalog:finder", args=[f"{slug_path}/{child.slug}"]),
+                    )
+                    for child in children
+                ],
+                len(categories) - i,
+                reverse("catalog:finder", args=[slug_path]),
             )
         )