From 9c9144e917fa6f7ed6d46760815e4ba68925eb3b Mon Sep 17 00:00:00 2001
From: cyz1901 <1093491992@qq.com>
Date: Sat, 23 Dec 2023 20:53:51 +0800
Subject: [PATCH 1/3] update doc about background fibers in http4s

---
 docs/demos/http4s.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/demos/http4s.md b/docs/demos/http4s.md
index c5f83bb9..16a12d71 100644
--- a/docs/demos/http4s.md
+++ b/docs/demos/http4s.md
@@ -43,6 +43,7 @@ val app: Resource[IO, HtmlDivElement[IO]] = (
           case Right(Repo(stars)) => starsResult.set(s"$stars ★")
           case Left(_) => starsResult.set(s"Not found :(")
         }
+        .background // transfer fetch requests to background fibers to avoid blocking page rendering
 
   div(
     h3("How many stars?"),

From d07fa5b5f985b66b0ee2787f9ab18694014b6b84 Mon Sep 17 00:00:00 2001
From: cyz1901 <1093491992@qq.com>
Date: Tue, 26 Dec 2023 21:22:42 +0800
Subject: [PATCH 2/3] update example

---
 docs/demos/http4s.md | 78 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)

diff --git a/docs/demos/http4s.md b/docs/demos/http4s.md
index 16a12d71..e1e58d64 100644
--- a/docs/demos/http4s.md
+++ b/docs/demos/http4s.md
@@ -62,3 +62,81 @@ val app: Resource[IO, HtmlDivElement[IO]] = (
 
 app.renderInto(node.asInstanceOf[fs2.dom.Node[IO]]).useForever.unsafeRunAndForget()
 ```
+
+## background
+
+```scala mdoc:js
+import calico.html.io.{*, given}
+import calico.syntax.*
+import calico.unsafe.given
+import cats.effect.*
+import cats.syntax.all.*
+import fs2.Stream
+import fs2.concurrent.*
+import fs2.dom.*
+import io.circe.*
+import org.http4s.*
+import org.http4s.circe.*
+import org.http4s.dom.*
+import scala.concurrent.duration.*
+
+case class Repo(name: String) derives Decoder
+
+object Repo:
+  given EntityDecoder[IO, Repo] = jsonOf
+
+val client = FetchClientBuilder[IO].create
+
+def app: Resource[IO, HtmlElement[IO]] = (
+  SignallingRef[IO]
+    .of(false)
+    .toResource
+  )
+  .flatMap(c => {
+    div(
+      c.map(i =>
+        i.match
+          case false => previousPage(c)
+          case true  => nextPage(c)
+      )
+    )
+  })
+
+def previousPage(c: SignallingRef[IO, Boolean]): Resource[IO, HtmlElement[IO]] =
+  (
+    SignallingRef[IO]
+      .of("")
+      .toResource,
+    SignallingRef[IO]
+      .of(false)
+      .toResource
+  )
+    .flatMapN((data, show) => {
+      val fetchData = (IO.sleep(3.seconds) >> client
+        .expect[Repo]("https://api.github.com/repos/armanbilge/calico")
+        .attempt
+        .flatMap {
+          case Right(Repo(name)) =>
+            data.set(name) >> show.set(true)
+          case Left(error) => IO(println(s"Error is ${error}"))
+        }).background
+
+      div(
+        show
+          .map(i =>
+            i.match
+              case false => fetchData *> div("loading...")
+              case true =>
+                div(
+                  div("get name:", data),
+                  button("next", onClick --> (_.foreach(_ => c.set(true))))
+                )
+          )
+      )
+    })
+
+def nextPage(c: SignallingRef[IO, Boolean]): Resource[IO, HtmlElement[IO]] =
+  button("back", onClick --> (_.foreach(_ => c.set(false))))
+
+app.renderInto(node.asInstanceOf[fs2.dom.Node[IO]]).useForever.unsafeRunAndForget()
+```
\ No newline at end of file

From 2b6a13e6b0a2adb0120cd237893a4e251443d2b2 Mon Sep 17 00:00:00 2001
From: cyz1901 <1093491992@qq.com>
Date: Tue, 26 Dec 2023 22:13:00 +0800
Subject: [PATCH 3/3] fixed error

---
 docs/demos/http4s.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/demos/http4s.md b/docs/demos/http4s.md
index e1e58d64..f9514a43 100644
--- a/docs/demos/http4s.md
+++ b/docs/demos/http4s.md
@@ -43,7 +43,6 @@ val app: Resource[IO, HtmlDivElement[IO]] = (
           case Right(Repo(stars)) => starsResult.set(s"$stars ★")
           case Left(_) => starsResult.set(s"Not found :(")
         }
-        .background // transfer fetch requests to background fibers to avoid blocking page rendering
 
   div(
     h3("How many stars?"),
@@ -119,7 +118,7 @@ def previousPage(c: SignallingRef[IO, Boolean]): Resource[IO, HtmlElement[IO]] =
           case Right(Repo(name)) =>
             data.set(name) >> show.set(true)
           case Left(error) => IO(println(s"Error is ${error}"))
-        }).background
+        }).background // transfer fetch requests to background fibers to avoid blocking page rendering
 
       div(
         show
@@ -128,7 +127,8 @@ def previousPage(c: SignallingRef[IO, Boolean]): Resource[IO, HtmlElement[IO]] =
               case false => fetchData *> div("loading...")
               case true =>
                 div(
-                  div("get name:", data),
+                  styleAttr := "display: flex; flex-direction: row;",
+                  div("Get repo name: ", data, styleAttr := "margin-right: 1em;"),
                   button("next", onClick --> (_.foreach(_ => c.set(true))))
                 )
           )