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
import "mal/internal/jikan"
import "mal/internal/shared/ui"
import "fmt"
templ Catalog() {
@Layout("mal - catalog") {
<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 class="loading-indicator">
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<span>Loading catalog</span>
</div>
@ui.LoadingIndicator("Loading catalog")
</div>
</div>
}

8
internal/templates/index.templ
View File

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

8
internal/templates/schedule.templ
View File

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