feat: lazy loading

lazyload/bars.svg

@@ -0,0 +1,52 @@
+<svg width="16" height="16" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#494949">
+    <rect y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="30" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.25s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.25s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="60" width="15" height="140" rx="6">
+        <animate attributeName="height"
+             begin="0s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="90" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.25s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.25s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="120" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+</svg>

lazyload/handlers.go

@@ -0,0 +1,39 @@
+package lazyload
+
+import (
+	_ "embed"
+	"net/http"
+	"time"
+)
+
+var (
+	//go:embed tokyo.png
+	graphBytes []byte
+	//go:embed bars.svg
+	barsBytes []byte
+)
+
+func Handlers(prefix string, mux *http.ServeMux) {
+	mux.HandleFunc(prefix+"/", index)
+	mux.HandleFunc(prefix+"/graph", graph)
+	mux.HandleFunc(prefix+"/bars.svg", bars)
+	mux.HandleFunc(prefix+"/tokyo.png", tokyo)
+}
+
+func index(w http.ResponseWriter, r *http.Request) {
+	Index().Render(r.Context(), w)
+}
+
+func graph(w http.ResponseWriter, r *http.Request) {
+	time.Sleep(2 * time.Second)
+	graphImage().Render(r.Context(), w)
+}
+
+func bars(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "image/svg+xml")
+	w.Write(barsBytes)
+}
+
+func tokyo(w http.ResponseWriter, r *http.Request) {
+	w.Write(graphBytes)
+}

lazyload/templates.templ

@@ -0,0 +1,27 @@
+package lazyload
+
+import 	"examples/shared"
+
+templ demo() {
+	<style>
+	.htmx-settling img {
+	  opacity: 0;
+	}
+	img {
+	 transition: opacity 300ms ease-in;
+	}
+	</style>
+	<div hx-get="/lazy-loading/graph" hx-trigger="load"><img alt="Result loading..." class="htmx-indicator" width="150" src="/lazy-loading/bars.svg"/></div>
+}
+
+templ graphImage() {
+	<img alt="Tokyo Climate" src="/lazy-loading/tokyo.png"/>
+}
+
+templ Index() {
+	@shared.Layout("Lazy Loading") {
+		<h2 class="title">Lazy Loading</h2>
+		@demo()
+	}
+}
+

lazyload/templates_templ.go

@@ -0,0 +1,212 @@
+// Code generated by templ@(devel) DO NOT EDIT.
+
+package lazyload
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+// GoExpression
+import 	"examples/shared"
+
+func demo() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
+		templBuffer, templIsBuffer := w.(*bytes.Buffer)
+		if !templIsBuffer {
+			templBuffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templBuffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		var_1 := templ.GetChildren(ctx)
+		if var_1 == nil {
+			var_1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+// RawElement
+		_, err = templBuffer.WriteString("<style>")
+		if err != nil {
+			return err
+		}
+// Text
+var_2 := `
+	.htmx-settling img {
+	  opacity: 0;
+	}
+	img {
+	 transition: opacity 300ms ease-in;
+	}
+	`
+_, err = templBuffer.WriteString(var_2)
+if err != nil {
+	return err
+}
+		_, err = templBuffer.WriteString("</style>")
+		if err != nil {
+			return err
+		}
+		// Element (standard)
+		_, err = templBuffer.WriteString("<div")
+		if err != nil {
+			return err
+		}
+		// Element Attributes
+		_, err = templBuffer.WriteString(" hx-get=\"/lazy-loading/graph\"")
+		if err != nil {
+			return err
+		}
+		_, err = templBuffer.WriteString(" hx-trigger=\"load\"")
+		if err != nil {
+			return err
+		}
+		_, err = templBuffer.WriteString(">")
+		if err != nil {
+			return err
+		}
+		// Element (void)
+		_, err = templBuffer.WriteString("<img")
+		if err != nil {
+			return err
+		}
+		// Element Attributes
+		_, err = templBuffer.WriteString(" alt=\"Result loading...\"")
+		if err != nil {
+			return err
+		}
+		_, err = templBuffer.WriteString(" class=\"htmx-indicator\"")
+		if err != nil {
+			return err
+		}
+		_, err = templBuffer.WriteString(" width=\"150\"")
+		if err != nil {
+			return err
+		}
+		_, err = templBuffer.WriteString(" src=\"/lazy-loading/bars.svg\"")
+		if err != nil {
+			return err
+		}
+		_, err = templBuffer.WriteString(">")
+		if err != nil {
+			return err
+		}
+		_, err = templBuffer.WriteString("</div>")
+		if err != nil {
+			return err
+		}
+		if !templIsBuffer {
+			_, err = io.Copy(w, templBuffer)
+		}
+		return err
+	})
+}
+
+func graphImage() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
+		templBuffer, templIsBuffer := w.(*bytes.Buffer)
+		if !templIsBuffer {
+			templBuffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templBuffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		var_3 := templ.GetChildren(ctx)
+		if var_3 == nil {
+			var_3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		// Element (void)
+		_, err = templBuffer.WriteString("<img")
+		if err != nil {
+			return err
+		}
+		// Element Attributes
+		_, err = templBuffer.WriteString(" alt=\"Tokyo Climate\"")
+		if err != nil {
+			return err
+		}
+		_, err = templBuffer.WriteString(" src=\"/lazy-loading/tokyo.png\"")
+		if err != nil {
+			return err
+		}
+		_, err = templBuffer.WriteString(">")
+		if err != nil {
+			return err
+		}
+		if !templIsBuffer {
+			_, err = io.Copy(w, templBuffer)
+		}
+		return err
+	})
+}
+
+func Index() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
+		templBuffer, templIsBuffer := w.(*bytes.Buffer)
+		if !templIsBuffer {
+			templBuffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templBuffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		var_4 := templ.GetChildren(ctx)
+		if var_4 == nil {
+			var_4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		// TemplElement
+		var_5 := templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
+			templBuffer, templIsBuffer := w.(*bytes.Buffer)
+			if !templIsBuffer {
+				templBuffer = templ.GetBuffer()
+				defer templ.ReleaseBuffer(templBuffer)
+			}
+			// Element (standard)
+			_, err = templBuffer.WriteString("<h2")
+			if err != nil {
+				return err
+			}
+			// Element Attributes
+			_, err = templBuffer.WriteString(" class=\"title\"")
+			if err != nil {
+				return err
+			}
+			_, err = templBuffer.WriteString(">")
+			if err != nil {
+				return err
+			}
+			// Text
+			var_6 := `Lazy Loading`
+			_, err = templBuffer.WriteString(var_6)
+			if err != nil {
+				return err
+			}
+			_, err = templBuffer.WriteString("</h2>")
+			if err != nil {
+				return err
+			}
+			// Whitespace (normalised)
+			_, err = templBuffer.WriteString(` `)
+			if err != nil {
+				return err
+			}
+			// TemplElement
+			err = demo().Render(ctx, templBuffer)
+			if err != nil {
+				return err
+			}
+			if !templIsBuffer {
+				_, err = io.Copy(w, templBuffer)
+			}
+			return err
+		})
+		err = shared.Layout("Lazy Loading").Render(templ.WithChildren(ctx, var_5), templBuffer)
+		if err != nil {
+			return err
+		}
+		if !templIsBuffer {
+			_, err = io.Copy(w, templBuffer)
+		}
+		return err
+	})
+}
+

main.go

@@ -6,6 +6,7 @@ import (
 	"examples/clicktoload"
 	"examples/deleterow"
 	"examples/editrow"
+	"examples/lazyload"
 	"log"
 	"net/http"
 
@@ -65,4 +66,10 @@ var examples = []Example{
 		Slug:     "edit-row",
 		Handlers: editrow.Handlers,
 	},
+	{
+		Name:     "Lazy Loading",
+		Desc:     "Demonstrates how to lazy load content",
+		Slug:     "lazy-loading",
+		Handlers: lazyload.Handlers,
+	},
 }