Prevent user-guide content to flash on page change

[Bonapara]

Current Behavior

There are three types of flashes occurring on the user-guide page transitions:

1. Cover flash (Prevent user-guide page cover to flash on page load #5503)
2. Table of content flash (0:13 on the video)
3. Global flash (0:05 on the video)

The table of contents loads after the main content, causing a flash. Additionally, when re-clicking on an already opened article, the table of content flashes again. Occasionally, a global flash occurs, giving the impression that all content is reloading. These issues are demonstrated in the attached video.

CleanShot.2024-05-21.at.12.06.32.mp4

Desired Behavior

Flashes should be eliminated to ensure smooth transitions and loading of content on the page.

[greptile-apps]

Disclaimer: This comment was automatically generated with AI. It can give some useful hints as to where to look for, but sometimes it can also give very inaccurate answers so takes this with a pinch of salt :).

To address the flashes on the user-guide page transitions, follow these steps:

1. UserGuideSidebar.tsx: Ensure the sidebar is preloaded and does not re-render unnecessarily.

2. UserGuideTableContents.tsx: Preload the table of contents along with the main content. Use React's useEffect to fetch and set the table of contents state before rendering the main content.

3. UserGuideContent.tsx: Optimize the content loading to prevent re-fetching data on re-clicking the same article. Implement caching mechanisms if necessary.

4. page.tsx: Ensure that the global layout and styles are consistent and do not cause reflows or repaints. Use React's Suspense and lazy for code-splitting and loading components efficiently.

Example for preloading table of contents in UserGuideTableContents.tsx:

useEffect(() => {
  async function fetchData() {
    const data = await fetchTableOfContents();
    setTableOfContents(data);
  }
  fetchData();
}, []);

Review these components and optimize their rendering and data fetching strategies to eliminate the flashes.

References