Skip to main content

Component render sequence

File structure:

analytics
  ├── loading.tsx
  └── page.tsx
      └── <AnalyticsWrapper/>

Let's take a deeper look at Analytic component​

We have loading.tsx in analytic folder. (1)

Inside page.tsx there is a component wrapped by <Suspense> (2)

// analytics > page.tsx

 <>
      <Suspense fallback={<Loader2Page />}>
        <AnalyticsWrapper
          courseId={params.courseId}
          searchParams={{ tab, lecture, metric }}
        />
      </Suspense>
    </>

then inside <AnalyticsWrapper> another fallback (3):

// analytics > page.tsx > AnalyticsWrapper.tsx

  <Suspense fallback={<KnowledgeGraphSkeleton />}>
    {searchParams.tab === 'graph' && <GraphTab />}
  </Suspense>

There are 2 potential scenarios​

  • Navigation from one page to another:
loading.tsx                  (1)
page.tsx > suspense          (2)
  • Refreshing the same page:
page.tsx > AnalyticsWrapper.tsx > suspense             (3) 
page.tsx > suspense (2) (priority) or loading.tsx      (1)

In order to avoid sequential rendering of 2 fallback components, it's better to use either loading.tsx or page.tsx > suspense, but not both.