shim renders app shell

repub/pages/shim.py

@@ -3,6 +3,8 @@ from __future__ import annotations
 import htpy as h
 from htpy import Node, Renderable
 
+from repub.components import admin_sidebar
+
 ON_LOAD_JS = (
     "@post(window.location.pathname + "
     "(window.location.search + '&u=').replace(/^&/,'?'), "
@@ -12,7 +14,9 @@ ON_LOAD_JS = (
 TAB_ID_JS = "self.crypto.randomUUID().substring(0,8)"
 
 
-def shim_page(*, datastar_src: str, head: Node | None = None) -> Renderable:
+def shim_page(
+    *, datastar_src: str, current_path: str, head: Node | None = None
+) -> Renderable:
     return h.html(lang="en")[
         h.head[
             h.meta(charset="UTF-8"),
@@ -29,6 +33,42 @@ def shim_page(*, datastar_src: str, head: Node | None = None) -> Renderable:
                 }
             ),
             h.noscript["Your browser does not support JavaScript!"],
-            h.main(id="morph"),
+            h.main(
+                id="morph",
+                class_="min-h-screen lg:grid lg:grid-cols-[18rem_minmax(0,1fr)]",
+            )[
+                admin_sidebar(current_path=current_path),
+                h.div(class_="px-4 py-4 sm:px-5 lg:px-6 lg:py-5")[
+                    h.div(class_="mx-auto max-w-7xl space-y-5")[
+                        h.section[
+                            h.div(
+                                class_="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+                            )[
+                                h.div(class_="max-w-3xl")[
+                                    h.p(
+                                        class_="text-xs font-semibold uppercase tracking-[0.22em] text-amber-600"
+                                    )["Connecting"],
+                                    h.h1(
+                                        class_="mt-1 text-3xl font-semibold tracking-tight text-slate-950"
+                                    )["Loading page"],
+                                    h.p(class_="mt-1 text-sm text-slate-600")[
+                                        "Rendering the latest server view for this route."
+                                    ],
+                                ],
+                            ]
+                        ],
+                        h.section(
+                            class_="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200"
+                        )[
+                            h.div(class_="animate-pulse space-y-4 p-6")[
+                                h.div(class_="h-5 w-40 rounded-full bg-stone-100"),
+                                h.div(class_="h-12 rounded-2xl bg-stone-100"),
+                                h.div(class_="h-12 rounded-2xl bg-stone-100"),
+                                h.div(class_="h-12 rounded-2xl bg-stone-100"),
+                            ]
+                        ],
+                    ]
+                ],
+            ],
         ],
     ]

repub/web.py

@@ -81,12 +81,16 @@ DEFAULT_PANGEA_MAX_ARTICLES = "10"
 DEFAULT_PANGEA_OLDEST_ARTICLE = "3"
 
 
-def _render_shim_page(*, stylesheet_href: str, datastar_src: str) -> tuple[str, str]:
+def _render_shim_page(
+    *, stylesheet_href: str, datastar_src: str, current_path: str
+) -> tuple[str, str]:
     head = (
         h.title["Republisher Admin UI"],
         h.link(rel="stylesheet", href=stylesheet_href),
     )
-    body = str(shim_page(datastar_src=datastar_src, head=head))
+    body = str(
+        shim_page(datastar_src=datastar_src, current_path=current_path, head=head)
+    )
     etag = hashlib.sha256(body.encode("utf-8")).hexdigest()
     return body, etag
 
@@ -116,6 +120,7 @@ def create_app() -> Quart:
         body, etag = _render_shim_page(
             stylesheet_href=url_for("static", filename="app.css"),
             datastar_src=url_for("static", filename="datastar@1.0.0-RC.8.js"),
+            current_path=request.path,
         )
         if request.if_none_match.contains(etag):
             response = Response(status=304)

tests/test_web.py

@@ -52,7 +52,10 @@ def test_root_get_serves_datastar_shim() -> None:
         assert 'data-init="@post(window.location.pathname +' in body
         assert "retryMaxCount: Infinity" in body
         assert "data-on:online__window=" in body
-        assert '<main id="morph"></main>' in body
+        assert '<main id="morph"' in body
+        assert 'href="/sources"' in body
+        assert 'href="/runs"' in body
+        assert "Connecting" in body
 
     asyncio.run(run())