Ensure visibility is applied when initialized as False (#5508)

* Ensure visibility is applied when initialized as False

* Add test

panel/models/html.ts

@@ -46,6 +46,10 @@ export class HTMLView extends PanelMarkupView {
       const html = this.process_tex()
       this.set_html(html)
     })
+    this.connect(this.model.properties.visible.change, () => {
+      if (this.model.visible)
+	this.container.style.visibility = 'visible';
+    })
     this.connect(this.model.properties.events.change, () => {
       this._remove_event_listeners()
       this._setup_event_listeners()

panel/models/quill.ts

@@ -15,6 +15,10 @@ export class QuillInputView extends HTMLBoxView {
   connect_signals(): void {
     super.connect_signals()
     this.connect(this.model.properties.disabled.change, () => this.quill.enable(!this.model.disabled))
+    this.connect(this.model.properties.visible.change, () => {
+      if (this.model.visible)
+	this.container.style.visibility = 'visible';
+    })
     this.connect(this.model.properties.text.change, () => {
       if (this._editing)
         return
@@ -79,7 +83,8 @@ export class QuillInputView extends HTMLBoxView {
   }
 
   style_redraw(): void {
-    this.container.style.visibility = 'visible';
+    if (this.model.visible)
+      this.container.style.visibility = 'visible';
     this.invalidate_layout()
   }
 

panel/models/tabulator.ts

@@ -300,6 +300,10 @@ export class DataTabulatorView extends HTMLBoxView {
       this.invalidate_render()
     }, 20, false))
 
+    this.connect(this.model.properties.visible.change, () => {
+      if (this.model.visible)
+	this.tabulator.element.style.visibility = 'visible';
+    })
     this.on_change([columns], () => {
       this.tabulator.setColumns(this.getColumns())
       this.setHidden()

panel/tests/ui/pane/test_markup.py

@@ -39,3 +39,21 @@ def test_update_markdown_pane_resizes(page, port):
     time.sleep(0.1)
     height = page.locator(".markdown").bounding_box()['height']
     assert int(height) == 37
+
+
+def test_markdown_pane_visible_toggle(page, port):
+    md = Markdown('Initial', visible=False)
+
+    serve(md, port=port, threaded=True, show=False)
+
+    time.sleep(0.2)
+    page.goto(f"http://localhost:{port}")
+
+    assert page.locator(".markdown").locator("div").text_content() == 'Initial\n'
+    assert not page.locator(".markdown").locator("div").is_visible()
+
+    md.visible = True
+
+    time.sleep(0.2)
+
+    assert page.locator(".markdown").locator("div").is_visible()