feat(platform): project homepage should start with loading

packages/platform/src/modules/project/statistics/artifact-size.tsx

@@ -155,6 +155,10 @@ export const ArtifactSize = () => {
   const history = useHistory()
 
   const aggregatedBundle = useMemo(() => {
+    if (!bundleHistory) {
+      return null
+    }
+
     const groupped = Object.entries(groupBy(bundleHistory, 'artifactName')).map(([artifactName, data]) => ({
       artifactName,
       data,

packages/platform/src/modules/project/statistics/index.tsx

@@ -36,7 +36,7 @@ const stackTokens: IStackTokens = {
 
 export const Statistics = () => {
   const { reset } = useDispatchers(StatisticsModule)
-  const [{ commits, lab, artifactJob, lhContent, currentIssueCount }, dispatcher] = useModule(HashReportModule)
+  const [{ allCommits, lab, artifactJob, lhContent, currentIssueCount }, dispatcher] = useModule(HashReportModule)
 
   const [selectedReport, setReport] = useState<VersionSnapshotReport | undefined>()
 
@@ -70,14 +70,14 @@ export const Statistics = () => {
   }, [dispatcher, reset])
 
   useEffect(() => {
-    if (commits.length) {
-      const latestCommit = commits[0]
+    if (allCommits.commits.length) {
+      const latestCommit = allCommits.commits[0]
 
       dispatcher.getArtifactByCommit(latestCommit)
       dispatcher.getSnapshotByCommit({ hash: latestCommit })
       dispatcher.fetchSourceIssueCount({ hash: latestCommit })
     }
-  }, [commits, dispatcher])
+  }, [allCommits.commits, dispatcher])
 
   useEffect(() => {
     if (!selectedReport && reports.length) {
@@ -110,11 +110,11 @@ export const Statistics = () => {
         </CardHeader>
         <CardContent>
           <VersionPerformanceOverview
-            hash={commits[0]}
+            hash={allCommits.commits[0]}
             snapshotReport={selectedReport}
             artifact={artifactJob.artifact}
             lhContent={lhContent}
-            loading={lab.loading}
+            loading={allCommits.loading || lab.loading}
             sourceIssueCount={currentIssueCount}
           />
         </CardContent>

packages/platform/src/modules/project/statistics/module.ts

@@ -42,15 +42,15 @@ export type PageAggregation = {
 }
 
 interface State {
-  bundleHistory: BundleEntrypoint[] | undefined
-  aggregatedPages: PageAggregation[]
+  bundleHistory: BundleEntrypoint[] | null
+  aggregatedPages: PageAggregation[] | null
 }
 
 @Module('StatisticsModule')
 export class StatisticsModule extends EffectModule<State> {
   defaultState: State = {
-    bundleHistory: [],
-    aggregatedPages: [],
+    bundleHistory: null,
+    aggregatedPages: null,
   }
 
   constructor(private readonly client: GraphQLClient, private readonly projectModule: ProjectModule) {
@@ -89,7 +89,7 @@ export class StatisticsModule extends EffectModule<State> {
         from(payload).pipe(
           filter(
             (filter) =>
-              aggregatedPages.findIndex(
+              (aggregatedPages ?? []).findIndex(
                 (page) =>
                   page.pageId === filter.pageId && page.profileId === filter.profileId && page.envId === filter.envId,
               ) === -1,
@@ -131,6 +131,10 @@ export class StatisticsModule extends EffectModule<State> {
 
   @ImmerReducer()
   setPageSnapshots(state: Draft<State>, variable: PageAggregation) {
-    state.aggregatedPages.push(variable)
+    if (state.aggregatedPages) {
+      state.aggregatedPages.push(variable)
+    } else {
+      state.aggregatedPages = [variable]
+    }
   }
 }

packages/platform/src/modules/project/statistics/snapshot-metrics.tsx

@@ -236,9 +236,9 @@ export const SnapshotMetrics = memo(() => {
     return pageColumns.concat(webColumns).concat([detailColumn])
   }, [])
 
-  const data = useMemo<PageMetricsSchema[]>(() => {
+  const data = useMemo<PageMetricsSchema[] | null>(() => {
     if (!aggregated) {
-      return []
+      return null
     }
 
     const res = []
@@ -301,10 +301,11 @@ export const SnapshotMetrics = memo(() => {
         </Space>
       </ChartPartHeader>
       <Table
-        items={data}
+        items={data ?? []}
         columns={columns}
         selectionMode={SelectionMode.none}
         detailsListStyles={tableHeaderStyles}
+        enableShimmer={!data}
         onRowClick={handleRowClick}
       />
       {!loadMore && selectedPages.length > 5 && <LoadMore onClick={handleLoadMore} />}

packages/platform/src/modules/version-report/index.tsx

@@ -42,7 +42,7 @@ export const VersionReport = () => {
   const history = useHistory()
   const breadcrumb = useBreadcrumb({ versionReportPage: true })
 
-  const [{ commits, artifactJob, lab, lhContent, currentIssueCount }, dispatcher] = useModule(HashReportModule)
+  const [{ allCommits, artifactJob, lab, lhContent, currentIssueCount }, dispatcher] = useModule(HashReportModule)
   const [{ hash = '', reportId, tabName = PivotKey.Overview }, updateQueryString] = useQueryString<{
     hash: string
     reportId: number
@@ -92,20 +92,20 @@ export const VersionReport = () => {
   }, [dispatcher])
 
   useEffect(() => {
-    if (hash && commits.length) {
+    if (hash && allCommits.commits.length) {
       dispatcher.getArtifactByCommit(hash)
       dispatcher.getSnapshotByCommit({ hash })
       dispatcher.fetchSourceIssueCount({ hash })
     }
-  }, [commits, dispatcher, hash])
+  }, [allCommits, dispatcher, hash])
 
   useEffect(() => {
-    if (commits.length && (!hash || !commits.includes(hash))) {
+    if (allCommits.commits.length && (!hash || !allCommits.commits.includes(hash))) {
       updateQueryString({
-        hash: commits[0],
+        hash: allCommits.commits[0],
       })
     }
-  }, [commits, updateQueryString, hash])
+  }, [allCommits, updateQueryString, hash])
 
   useEffect(() => {
     // init snapshot report
@@ -143,10 +143,10 @@ export const VersionReport = () => {
       <Stack verticalAlign="center" horizontal={true}>
         <LeftOutlined onClick={backToHome} style={{ color: NeutralColors.gray100, marginRight: '14px' }} />
         <b style={{ fontSize: '16px', marginRight: '20px' }}>Version Report</b>
-        <CommitSelector commit={hash} allCommits={commits} onChange={onChangeCommit} />
+        <CommitSelector commit={hash} allCommits={allCommits.commits} onChange={onChangeCommit} />
       </Stack>
     ),
-    [commits, backToHome, onChangeCommit, hash],
+    [allCommits, backToHome, onChangeCommit, hash],
   )
 
   useEffect(() => {
@@ -180,7 +180,7 @@ export const VersionReport = () => {
               snapshotReport={selectedReport}
               artifact={artifactJob.artifact}
               lhContent={lhContent}
-              loading={lab.loading}
+              loading={allCommits.loading || lab.loading}
               hideBasic={true}
               sourceIssueCount={currentIssueCount}
             />

packages/platform/src/modules/version-report/types.ts

@@ -30,6 +30,10 @@ interface WithLoading {
   loading: boolean
 }
 
+export interface VersionCommits extends WithLoading {
+  commits: string[]
+}
+
 export interface VersionArtifactJob extends WithLoading {
   artifact?: Artifact
 }

packages/platform/src/modules/version-report/version-report.module.ts

@@ -16,8 +16,8 @@ limitations under the License.
 
 import { Module, EffectModule, Effect, ImmerReducer, Reducer } from '@sigi/core'
 import { Draft } from 'immer'
-import { Observable } from 'rxjs'
-import { map, startWith, endWith, switchMap, withLatestFrom, filter } from 'rxjs/operators'
+import { Observable, of } from 'rxjs'
+import { map, startWith, endWith, switchMap, withLatestFrom, filter, mergeMap, delay } from 'rxjs/operators'
 
 import { GraphQLClient, createErrorCatcher, RxFetch, getStorageLink } from '@perfsee/platform/common'
 import {
@@ -36,13 +36,14 @@ import {
   LighthouseTosContent,
   SourceIssue,
   VersionArtifactJob,
+  VersionCommits,
   VersionIssues,
   VersionLab,
   VersionLHContent,
 } from './types'
 
 interface State {
-  commits: string[]
+  allCommits: VersionCommits
   artifactJob: VersionArtifactJob
   lab: VersionLab
   issues: VersionIssues
@@ -63,7 +64,10 @@ export class HashReportModule extends EffectModule<State> {
   }
 
   @ImmerReducer()
-  setLoading(state: Draft<State>, { key, value }: { key: 'artifactJob' | 'lab' | 'lhContent'; value: boolean }) {
+  setLoading(
+    state: Draft<State>,
+    { key, value }: { key: 'allCommits' | 'artifactJob' | 'lab' | 'lhContent'; value: boolean },
+  ) {
     state[key].loading = value
   }
 
@@ -82,7 +86,7 @@ export class HashReportModule extends EffectModule<State> {
 
   @ImmerReducer()
   setCommits(state: Draft<State>, payload: string[]) {
-    state.commits = payload
+    state.allCommits.commits = payload
   }
 
   @ImmerReducer()
@@ -150,14 +154,27 @@ export class HashReportModule extends EffectModule<State> {
           })
           .pipe(
             createErrorCatcher('Failed to fetch commits from snapshots.'),
-            map((res) => {
-              return this.getActions().setCommits(res.project.appVersions.map(({ hash }) => hash))
+            mergeMap((res) => {
+              return of(
+                this.getActions().setCommits(res.project.appVersions.map(({ hash }) => hash)),
+                this.getActions().delaySetCommitLoading(),
+              )
             }),
+            startWith(this.getActions().setLoading({ key: 'allCommits', value: true })),
           ),
       ),
     )
   }
 
+  // in case loading twinkle
+  @Effect()
+  delaySetCommitLoading(payload$: Observable<void>) {
+    return payload$.pipe(
+      delay(200),
+      map(() => this.getActions().setLoading({ key: 'allCommits', value: false })),
+    )
+  }
+
   @Effect()
   getArtifactByCommit(payload$: Observable<string>) {
     return payload$.pipe(
@@ -292,7 +309,10 @@ export class HashReportModule extends EffectModule<State> {
 
   private getInitState(): State {
     return {
-      commits: [],
+      allCommits: {
+        commits: [],
+        loading: false,
+      },
       ...this.getModuleInitState(),
     }
   }