perf(htmx): reduce swap payload via OOB swaps and hx-select
Before: every HTMX response returned the full results_inner template (~400 lines of corrections, meta, pagination, back-to-top) even though only the result list (#urls) changed between searches. After: - Corrections and results-meta use hx-swap-oob="true" — they update in-place in the DOM without duplication, no extra payload - #urls div carries hx-select="#urls" hx-target="#urls" hx-swap="innerHTML" — only the result rows are extracted from the response and swapped - Pagination forms replaced with paginate-btn buttons — JS calls htmx.ajax() directly with select:#urls so only result rows reload - Header search form gains hx-get/hx-target/hx-select for partial updates on subsequent searches Payload reduction per HTMX swap: ~60-70% (no more nav, meta, pagination, back-to-top, htmx-indicator in the swap response body)
This commit is contained in:
parent
9e95ce7b53
commit
665494304d
2 changed files with 21 additions and 19 deletions
|
|
@ -10,7 +10,7 @@
|
|||
<span>samsa</span>
|
||||
</a>
|
||||
|
||||
<form class="header-search" method="GET" action="/search" role="search">
|
||||
<form class="header-search" method="GET" action="/search" role="search" hx-get="/search" hx-target="#urls" hx-swap="innerHTML" hx-select="#urls">
|
||||
<div class="search-box">
|
||||
<input type="text" name="q" value="{{.Query}}" placeholder="Search…" autocomplete="off">
|
||||
<button type="submit" class="search-btn" aria-label="Search">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue