From 0eea19c3d3e404ba662b405195cde4e70d847092 Mon Sep 17 00:00:00 2001
From: Andros Fenollosa <andros@fenollosa.email>
Date: Thu, 21 Mar 2024 10:59:07 +0100
Subject: [PATCH] Add loading

---
 one.org  | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 onerc.el |  2 ++
 2 files changed, 79 insertions(+)

diff --git a/one.org b/one.org
index 25a9b0d..423670e 100644
--- a/one.org
+++ b/one.org
@@ -538,6 +538,83 @@ Or you could read it with the ~lang~ key of the ~client_data~ parameter.
 
 You can read the tutorial [[#/tutorials/internationalize-with-subdomains/][Internationalize with subdomains]] to see how to create a multilingual website with subdomains.
 
+* Loading
+:PROPERTIES:
+:ONE: one-custom-default-doc
+:CUSTOM_ID: /docs/loading/
+:TITLE: Loading
+:DESCRIPTION: Loading management of Django LiveView.
+:END:
+
+It is very useful when the database access is slow or you access external services like APIs. You can make a loading animation while the page is being rendered.
+
+For example, first create a template called ~loading.html~.
+
+#+BEGIN_SRC html
+  <div
+    style="
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    backdrop-filter: blur(3px);
+    "
+></div>
+#+END_SRC
+
+This code will blur the entire page. You can customize it as you like.
+
+Now you can make ~tools_template.py~ in the app or root folder with the following content.
+
+#+BEGIN_SRC python
+from django.template.loader import render_to_string
+from liveview.context_processors import get_global_context
+
+async def toggle_loading(consumer, show=False):
+    """Toogle Loading template."""
+    data = {
+        "action": ("Show" if show else "Hide") + " loading",
+        "selector": "#loading",
+        "html": render_to_string(
+            "loading.html", get_global_context(consumer=consumer)
+        )
+        if show
+        else "",
+    }
+    await consumer.send_html(data)
+
+
+def loading(func):
+    """Decorator: Show loading."""
+
+    async def wrapper(*args, **kwargs):
+        await toggle_loading(args[0], True)
+        result = await func(*args, **kwargs)
+        await toggle_loading(args[0], False)
+        return result
+
+    return wrapper
+#+END_SRC
+
+And in the action file, you can use the ~@loading~ decorator.
+
+#+BEGIN_SRC python
+  from app.tools_template import loading
+
+  @loading
+  async def send_page(consumer, client_data, lang=None):
+      my_context = await get_context(consumer=consumer)
+      html = await get_html(template, my_context)
+      data = {
+	  "action": client_data["action"],
+	  "selector": "#main",
+	  "html": html,
+      }
+      data.update(my_context)
+      await consumer.send_html(data)
+#+END_SRC
+
+This will show the loading before executing the action and remove it when finished.
+
 * Deploy
 :PROPERTIES:
 :ONE: one-custom-default-doc
diff --git a/onerc.el b/onerc.el
index d416af0..253886b 100644
--- a/onerc.el
+++ b/onerc.el
@@ -182,6 +182,8 @@
 		      (:a.nav-docs__link (@ :href "/docs/history/") "History"))
 		     (:li.nav-docs__item
 		      (:a.nav-docs__link (@ :href "/docs/internationalization/") "Internationalization"))
+		     (:li.nav-docs__item
+		      (:a.nav-docs__link (@ :href "/docs/loading/") "Loading"))
 		     (:li.nav-docs__item
 		      (:a.nav-docs__link (@ :href "/docs/deploy/") "Deploy"))
 		     (:li.nav-docs__item