melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: extract loading indicator to shared ui package

Browse Source
This commit is contained in:
mkelvers
2026-04-08 18:06:23 +02:00
parent a0617ec127
commit 8cc07dfadd
4 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
internal/shared/ui/loading.templ Normal file
View File

@@ -0,0 +1,10 @@
package ui
templ LoadingIndicator(text string) {
<div class="loading-indicator">
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<span>{ text }</span>
</div>
}

8
internal/templates/catalog.templ
View File

@@ -1,18 +1,14 @@
package templates package templates
import "mal/internal/jikan" import "mal/internal/jikan"
import "mal/internal/shared/ui"
import "fmt" import "fmt"
templ Catalog() { templ Catalog() {
@Layout("mal - catalog") { @Layout("mal - catalog") {
<div class="catalog-grid" id="catalog-content"> <div class="catalog-grid" id="catalog-content">
<div hx-get="/api/catalog?page=1" hx-trigger="load" hx-swap="outerHTML" style="grid-column: 1 / -1;"> <div hx-get="/api/catalog?page=1" hx-trigger="load" hx-swap="outerHTML" style="grid-column: 1 / -1;">
<div class="loading-indicator"> @ui.LoadingIndicator("Loading catalog")
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<span>Loading catalog</span>
</div>
</div> </div>
</div> </div>
} }

8
internal/templates/index.templ
View File

@@ -3,17 +3,15 @@ package templates
import ( import (
"fmt" "fmt"
"mal/internal/jikan" "mal/internal/jikan"
"mal/internal/shared/ui"
"net/url" "net/url"
) )
templ Search(q string) { templ Search(q string) {
@Layout("mal - search") { @Layout("mal - search") {
if q != "" { if q != "" {
<div class="loading-indicator htmx-indicator" id="loading"> <div id="loading" class="htmx-indicator">
<div class="loading-dot"></div> @ui.LoadingIndicator("Searching...")
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<span>Searching...</span>
</div> </div>
<div id="results" hx-get={ string(templ.URL("/search?q=" + url.QueryEscape(q))) } hx-trigger="load" hx-indicator="#loading"></div> <div id="results" hx-get={ string(templ.URL("/search?q=" + url.QueryEscape(q))) } hx-trigger="load" hx-indicator="#loading"></div>
} else { } else {

8
internal/templates/schedule.templ
View File

@@ -1,6 +1,7 @@
package templates package templates
import "mal/internal/jikan" import "mal/internal/jikan"
import "mal/internal/shared/ui"
import "fmt" import "fmt"
import "strings" import "strings"
@@ -21,12 +22,7 @@ templ Schedule() {
</div> </div>
<div id="schedule-content" hx-get="/api/schedule?day=monday" hx-trigger="load"> <div id="schedule-content" hx-get="/api/schedule?day=monday" hx-trigger="load">
<div class="loading-indicator"> @ui.LoadingIndicator("Loading schedule")
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<span>Loading schedule</span>
</div>
</div> </div>
</div> </div>