Improve homepage loading speed (#21628)

frontend/src/metabase/home/homepage/components/HomeContent/HomeContent.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import moment from "moment";
 import { parseTimestamp } from "metabase/lib/time";
 import { isSyncCompleted } from "metabase/lib/syncing";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 import { Database, PopularItem, RecentItem, User } from "metabase-types/api";
 import HomePopularSection from "../../containers/HomePopularSection";
 import HomeRecentSection from "../../containers/HomeRecentSection";
@@ -9,12 +10,16 @@ import HomeXraySection from "../../containers/HomeXraySection";
 
 export interface HomeContentProps {
   user: User;
-  databases: Database[];
-  recentItems: RecentItem[];
-  popularItems: PopularItem[];
+  databases?: Database[];
+  recentItems?: RecentItem[];
+  popularItems?: PopularItem[];
 }
 
 const HomeContent = (props: HomeContentProps): JSX.Element | null => {
+  if (isLoading(props)) {
+    return <LoadingAndErrorWrapper loading />;
+  }
+
   if (isPopularSection(props)) {
     return <HomePopularSection />;
   }
@@ -30,24 +35,42 @@ const HomeContent = (props: HomeContentProps): JSX.Element | null => {
   return null;
 };
 
-const isPopularSection = ({
+const isLoading = ({
   user,
+  databases,
   recentItems,
   popularItems,
+}: HomeContentProps): boolean => {
+  if (!user.has_question_and_dashboard) {
+    return databases == null;
+  } else if (user.is_installer || !isWithinWeek(user.first_login)) {
+    return databases == null || recentItems == null;
+  } else {
+    return databases == null || recentItems == null || popularItems == null;
+  }
+};
+
+const isPopularSection = ({
+  user,
+  recentItems = [],
+  popularItems = [],
 }: HomeContentProps): boolean => {
   return (
     !user.is_installer &&
     user.has_question_and_dashboard &&
     popularItems.length > 0 &&
-    (isWithinWeek(user.date_joined) || !recentItems.length)
+    (isWithinWeek(user.first_login) || !recentItems.length)
   );
 };
 
-const isRecentSection = ({ user, recentItems }: HomeContentProps): boolean => {
+const isRecentSection = ({
+  user,
+  recentItems = [],
+}: HomeContentProps): boolean => {
   return user.has_question_and_dashboard && recentItems.length > 0;
 };
 
-const isXraySection = ({ databases }: HomeContentProps): boolean => {
+const isXraySection = ({ databases = [] }: HomeContentProps): boolean => {
   return databases.some(isSyncCompleted);
 };
 

frontend/src/metabase/home/homepage/components/HomeContent/HomeContent.unit.spec.tsx

@@ -32,7 +32,7 @@ describe("HomeContent", () => {
       user: createMockUser({
         is_installer: false,
         has_question_and_dashboard: true,
-        date_joined: "2020-01-05T00:00:00Z",
+        first_login: "2020-01-05T00:00:00Z",
       }),
       databases: [createMockDatabase()],
       recentItems: [createMockRecentItem()],
@@ -49,7 +49,7 @@ describe("HomeContent", () => {
       user: createMockUser({
         is_installer: false,
         has_question_and_dashboard: true,
-        date_joined: "2020-01-05T00:00:00Z",
+        first_login: "2020-01-05T00:00:00Z",
       }),
       databases: [createMockDatabase()],
       recentItems: [],
@@ -66,7 +66,7 @@ describe("HomeContent", () => {
       user: createMockUser({
         is_installer: false,
         has_question_and_dashboard: true,
-        date_joined: "2020-01-01T00:00:00Z",
+        first_login: "2020-01-01T00:00:00Z",
       }),
       databases: [createMockDatabase()],
       recentItems: [createMockRecentItem()],
@@ -82,7 +82,7 @@ describe("HomeContent", () => {
       user: createMockUser({
         is_installer: true,
         has_question_and_dashboard: false,
-        date_joined: "2020-01-10T00:00:00Z",
+        first_login: "2020-01-10T00:00:00Z",
       }),
       databases: [createMockDatabase()],
       recentItems: [],
@@ -98,7 +98,7 @@ describe("HomeContent", () => {
       user: createMockUser({
         is_installer: true,
         has_question_and_dashboard: false,
-        date_joined: "2020-01-10T00:00:00Z",
+        first_login: "2020-01-10T00:00:00Z",
       }),
       databases: [createMockDatabase()],
       recentItems: [createMockRecentItem()],
@@ -114,7 +114,7 @@ describe("HomeContent", () => {
       user: createMockUser({
         is_installer: true,
         has_question_and_dashboard: false,
-        date_joined: "2020-01-10T00:00:00Z",
+        first_login: "2020-01-10T00:00:00Z",
       }),
       databases: [],
       recentItems: [],
@@ -124,6 +124,21 @@ describe("HomeContent", () => {
 
     expect(screen.queryByText("XraySection")).not.toBeInTheDocument();
   });
+
+  it("should render loading state if there is not enough data to choose a section", () => {
+    const props = getProps({
+      user: createMockUser({
+        is_installer: true,
+        has_question_and_dashboard: false,
+        first_login: "2020-01-10T00:00:00Z",
+      }),
+      databases: undefined,
+    });
+
+    render(<HomeContent {...props} />);
+
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+  });
 });
 
 const getProps = (opts?: Partial<HomeContentProps>): HomeContentProps => ({

frontend/src/metabase/home/homepage/containers/HomeContent/HomeContent.tsx

@@ -12,8 +12,8 @@ const mapStateToProps = (state: State) => ({
 });
 
 export default _.compose(
-  Databases.loadList(),
-  RecentItems.loadList({ reload: true }),
-  PopularItems.loadList({ reload: true }),
+  Databases.loadList({ loadingAndErrorWrapper: false }),
+  RecentItems.loadList({ reload: true, loadingAndErrorWrapper: false }),
+  PopularItems.loadList({ reload: true, loadingAndErrorWrapper: false }),
   connect(mapStateToProps),
 )(HomeContent);