Improve Sidebar Loading

[dillchen]

Description

The "in community" sidebar should load as soon as possible upon any page loads. It seems that the loading of the sidebar should appear shortly after the top navigation and left most sidebar appears.

We want to improve the user experience by reducing the perceived loading time. We want to do this by showing more of the app without waiting--less white space and less Cow Bobber.

Preliminary Investigation

Currently, the Sidebar waits for app.chain.id to load, even though it's not necessary to display an initial view of component. That is, we see white space for longer

Suggested solution

• Determine when the layout is within the community.
• Show the Sidebar without waiting for app.chain.id to load, reload the sidebar once data necessary is loaded (all topics, or if the user is an admin)

Acceptance Criteria

• The loading of the sidebar should appear shortly after the top navigation and left most sidebar appears.

Here is the example, it should appear similar to this example: https://www.loom.com/share/3ef3d7c7bf654c13b58e6c3082bfaf6a

• The user should be able to switch back and forth between two different communities without any issues while the page is still loading

• Ensure no regressions occur on pages that require the chain or chain scope to be loaded when navigating to and from community pages.

[dillchen]

What has been tried already, before activeChain is set, we should show the sidebar, potentially with a ternary. However we need to handle the chainID better, because only using this approach will cause regressions

` {hasActiveChain && isInsideCommunity ? (

{showAdmin && } {featureFlags.communityHomepage && app.chain?.meta.hasHomepage && (

navigate('/feed')} > Home

        )}
        <DiscussionSection />
        <GovernanceSection />
        <ExternalLinksModule />
        <div className="buttons-container">
          {isLoggedIn && app.chain && (
            <div className="subscription-button">
              <SubscriptionButton />
            </div>
          )}
          {app.isCustomDomain() && (
            <div
              className="powered-by"
              onClick={() => {
                window.open('https://commonwealth.im/');
              }}
            />
          )}
        </div>
      </div>
    ) : (
      <div className="community-menu">
        <DiscussionSection />
        <GovernanceSection />
      </div>`

[mzparacha]

In the code I think we will have to update these components in the sidebar to handle app.activeChainId() when it's still initing chain

• <AdminSection/>
• <DiscussionSection/>
• <GovernanceSection/>
• <ExternalLinksModule/>
• <SubscriptionButton/>

[zakhap]

Superseded with #4548