From 7aa5c648064c59f6072c0ea49083a00238d169af Mon Sep 17 00:00:00 2001
From: Natalie Tay <natalie.tay@discourse.org>
Date: Wed, 29 May 2024 10:54:39 +0800
Subject: [PATCH] DEV: Delay rendering sidebar sections after sidebar is shown
 (#27227)

Delay rendering sidebar sections after sidebar is shown

Showing the popup takes about 100ms, then rendering each section
could take up to and additional 200ms, which leaves the total just
outside of 300ms. If we cheat by rendering the popup first then
the sections in the next frame, it improves our paint time

Introduce DeferredRender to encapsulate 'paint later'
---
 .../app/components/deferred-render.gjs        | 18 +++++++++
 .../components/sidebar/hamburger-dropdown.gjs | 40 ++++++++++---------
 2 files changed, 39 insertions(+), 19 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/components/deferred-render.gjs

diff --git a/app/assets/javascripts/discourse/app/components/deferred-render.gjs b/app/assets/javascripts/discourse/app/components/deferred-render.gjs
new file mode 100644
index 00000000000..aec52fd5c72
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/deferred-render.gjs
@@ -0,0 +1,18 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import runAfterFramePaint from "discourse/lib/after-frame-paint";
+
+export default class DeferredRender extends Component {
+  @tracked shouldRender = false;
+
+  constructor() {
+    super(...arguments);
+    runAfterFramePaint(() => (this.shouldRender = true));
+  }
+
+  <template>
+    {{#if this.shouldRender}}
+      {{yield}}
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.gjs b/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.gjs
index 17aa3feac85..249fa24dfbd 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.gjs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.gjs
@@ -3,6 +3,7 @@ import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import { service } from "@ember/service";
 import { or } from "truth-helpers";
+import DeferredRender from "discourse/components/deferred-render";
 import ApiPanels from "./api-panels";
 import Footer from "./footer";
 import Sections from "./sections";
@@ -39,25 +40,26 @@ export default class SidebarHamburgerDropdown extends Component {
       >
         <div class="panel-body">
           <div class="panel-body-contents">
-            <div class="sidebar-hamburger-dropdown">
-              {{#if
-                (or this.sidebarState.showMainPanel @forceMainSidebarPanel)
-              }}
-                <Sections
-                  @currentUser={{this.currentUser}}
-                  @collapsableSections={{this.collapsableSections}}
-                  @panel={{this.sidebarState.currentPanel}}
-                  @hideApiSections={{@forceMainSidebarPanel}}
-                />
-              {{else}}
-                <ApiPanels
-                  @currentUser={{this.currentUser}}
-                  @collapsableSections={{this.collapsableSections}}
-                />
-              {{/if}}
-
-              <Footer />
-            </div>
+            <DeferredRender>
+              <div class="sidebar-hamburger-dropdown">
+                {{#if
+                  (or this.sidebarState.showMainPanel @forceMainSidebarPanel)
+                }}
+                  <Sections
+                    @currentUser={{this.currentUser}}
+                    @collapsableSections={{this.collapsableSections}}
+                    @panel={{this.sidebarState.currentPanel}}
+                    @hideApiSections={{@forceMainSidebarPanel}}
+                  />
+                {{else}}
+                  <ApiPanels
+                    @currentUser={{this.currentUser}}
+                    @collapsableSections={{this.collapsableSections}}
+                  />
+                {{/if}}
+                <Footer />
+              </div>
+            </DeferredRender>
           </div>
         </div>
       </div>