the output inside the put_loading() context will also been removed after the context block exits.

Author: wang0618

pywebio/io_ctrl.py

@@ -76,8 +76,7 @@ def __init__(self, spec, on_embed=None):
         self.enabled_context_manager = False
         self.container_selector = None
         self.container_dom_id = None  # todo: this name is ambiguous, rename it to `scope_name` or others
-        self.custom_enter = None
-        self.custom_exit = None
+        self.after_exit = None
 
         # Try to make sure current session exist.
         # If we leave the session interaction in `Output.__del__`,
@@ -86,20 +85,16 @@ def __init__(self, spec, on_embed=None):
         # See also: https://github.com/pywebio/PyWebIO/issues/243
         get_current_session()
 
-    def enable_context_manager(self, container_selector=None, container_dom_id=None, custom_enter=None,
-                               custom_exit=None):
+    def enable_context_manager(self, container_selector=None, container_dom_id=None, after_exit=None):
         self.enabled_context_manager = True
         self.container_selector = container_selector
         self.container_dom_id = container_dom_id
-        self.custom_enter = custom_enter
-        self.custom_exit = custom_exit
+        self.after_exit = after_exit
         return self
 
     def __enter__(self):
         if not self.enabled_context_manager:
             raise RuntimeError("This output function can't be used as context manager!")
-        if self.custom_enter:
-            return self.custom_enter(self)
 
         self.container_dom_id = self.container_dom_id or random_str(10)
         self.spec['container_selector'] = self.container_selector
@@ -114,10 +109,9 @@ def __exit__(self, exc_type, exc_val, exc_tb):
         it means that the context manager can handle the exception,
         so that the with statement terminates the propagation of the exception
         """
-        if self.custom_exit:
-            return self.custom_exit(self, exc_type=exc_type, exc_val=exc_val, exc_tb=exc_tb)
-
         get_current_session().pop_scope()
+        if self.after_exit:
+            self.after_exit()
         return False  # Propagate Exception
 
     def embed_data(self):

pywebio/output.py

@@ -1034,35 +1034,36 @@ def put_loading(shape: str = 'border', color: str = 'dark', scope: str = None, p
 
         ## ----
         import time  # ..demo-only
-        # Use as context manager, the loading prompt will disappear automatically when the context block exits.
+        # The loading prompt and the output inside the context will disappear
+        # automatically when the context block exits.
         with put_loading():
+            put_text("Start waiting...")
             time.sleep(3)  # Some time-consuming operations
-            put_text("The answer of the universe is 42")
+        put_text("The answer of the universe is 42")
 
         ## ----
         # using style() to set the size of the loading prompt
         put_loading().style('width:4rem; height:4rem')
+
+    .. versionchanged:: 1.8
+       when use `put_loading()` as context manager, the output inside the context will also been removed
+       after the context block exits.
     """
     assert shape in ('border', 'grow'), "shape must in ('border', 'grow')"
     assert color in {'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'}
 
-    html = """<div class="spinner-{shape} text-{color}" role="status">
+    html = """<div><div class="spinner-{shape} text-{color}" role="status">
                 <span class="sr-only">Loading...</span>
-            </div>""".format(shape=shape, color=color)
+            </div></div>""".format(shape=shape, color=color)
 
     scope_name = random_str(10)
 
-    def enter(self):
-        self.spec['container_dom_id'] = scope2dom(scope_name, no_css_selector=True)
-        self.send()
-        return scope_name
-
-    def exit_(self, exc_type, exc_val, exc_tb):
+    def after_exit():
         remove(scope_name)
         return False  # Propagate Exception
 
     return put_html(html, sanitize=False, scope=scope, position=position). \
-        enable_context_manager(custom_enter=enter, custom_exit=exit_)
+        enable_context_manager(container_dom_id=scope_name, after_exit=after_exit)
 
 
 @safely_destruct_output_when_exp('content')