evaluate examples lazily

main.py

@@ -229,6 +229,7 @@ ui.run()
 def reference_page():
     add_head_html()
     add_header()
+    ui.add_head_html('<style>html {scroll-behavior: auto;}</style>')
     with ui.column().classes('w-full p-8 lg:p-16 max-w-[1600px] mx-auto'):
         section_heading('Documentation and Examples', '*API* Reference')
         reference.create_full()

website/example.py

@@ -7,6 +7,8 @@ import docutils.core
 from nicegui import ui
 from nicegui.elements.markdown import apply_tailwind
 
+from .intersection_observer import IntersectionObserver as intersection_observer
+
 REGEX_H4 = re.compile(r'<h4.*?>(.*?)</h4>')
 SPECIAL_CHARACTERS = re.compile('[^(a-z)(A-Z)(0-9)-]')
 PYTHON_BGCOLOR = '#e3e9f2'
@@ -19,9 +21,13 @@ BROWSER_COLOR = '#ffffff'
 
 class example:
 
-    def __init__(self, content: Union[Callable, type, str], browser_title: Optional[str] = None) -> None:
+    def __init__(self,
+                 content: Union[Callable, type, str],
+                 browser_title: Optional[str] = None,
+                 immediate: bool = False) -> None:
         self.content = content
         self.browser_title = browser_title
+        self.immediate = immediate
 
     def __call__(self, f: Callable) -> Callable:
         with ui.column().classes('w-full mb-8'):
@@ -59,7 +65,11 @@ class example:
                 with python_window(classes='w-full max-w-[48rem]'):
                     ui.markdown(code)
                 with browser_window(self.browser_title, classes='w-full max-w-[48rem] xl:max-w-[20rem] min-h-[10rem] browser-window'):
-                    f()
+                    if self.immediate:
+                        f()
+                    else:
+                        intersection_observer(on_intersection=f)
+
         return f
 
 

website/intersection_observer.js

@@ -0,0 +1,16 @@
+export default {
+  template: '<div style="position: absolute"></div>',
+  mounted() {
+    this.interval = setInterval(() => {
+      const rect = this.$el.getBoundingClientRect();
+      if (rect.bottom > -window.innerHeight && rect.top < 2 * window.innerHeight) {
+        this.$emit("intersection");
+      }
+    }, 100);
+  },
+  methods: {
+    stop() {
+      clearInterval(this.interval);
+    },
+  },
+};

website/intersection_observer.py

@@ -0,0 +1,22 @@
+from typing import Callable
+
+from nicegui.element import Element
+from nicegui.events import EventArguments, handle_event
+from nicegui.vue import register_component
+
+register_component('intersection_observer', __file__, 'intersection_observer.js')
+
+
+class IntersectionObserver(Element):
+
+    def __init__(self, *, on_intersection: Callable) -> None:
+        super().__init__('intersection_observer')
+        self.on_intersection = on_intersection
+        self.active = True
+        self.on('intersection', self.handle_intersection)
+
+    def handle_intersection(self, _) -> None:
+        self.run_method('stop')
+        if self.active:
+            handle_event(self.on_intersection, EventArguments(sender=self, client=self.client))
+            self.active = False

website/reference.py

@@ -474,7 +474,7 @@ You can run a function or coroutine as a parallel task by passing it to one of t
 - `ui.on_disconnect`: Called when a client disconnects from NiceGUI. (Optional argument: socket)
 
 When NiceGUI is shut down or restarted, the startup tasks will be automatically canceled.
-''')
+''', immediate=True)
     def lifecycle_example():
         import asyncio