github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-18 10:52:45 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Delay rendering sidebar sections after sidebar is shown (#27227)

Browse Source 
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'
This commit is contained in:
Natalie Tay 2024-05-29 10:54:39 +08:00 committed by GitHub
parent 2ed8f96e67
commit 7aa5c64806
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 39 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/assets/javascripts/discourse/app/components/deferred-render.gjs Normal file
View File

@ -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>
}

40
app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.gjs
View File

@ -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>