Add placeholder for task list experiment one

plugins/woocommerce-admin/client/homescreen/layout.js

@@ -42,6 +42,7 @@ import { WelcomeModal } from './welcome-modal';
 import { useHeadercardExperimentHook } from './hooks/use-headercard-experiment-hook';
 import './style.scss';
 import '../dashboard/style.scss';
+import { getAdminSetting } from '~/utils/admin-settings';
 
 const Tasks = lazy( () =>
 	import( /* webpackChunkName: "tasks" */ '../tasks' )
@@ -337,7 +338,7 @@ export default compose(
 			shouldShowWelcomeModal,
 			shouldShowWelcomeFromCalypsoModal,
 			isTaskListHidden: getTaskList( 'setup' )?.isHidden,
-			hasTaskList: !! taskLists.find( ( list ) => list.isVisible ),
+			hasTaskList: getAdminSetting( 'visibleTaskListIds', [] ).length > 0,
 			taskListComplete: getTaskList( 'setup' )?.isComplete,
 			installTimestamp,
 			installTimestampHasResolved,

plugins/woocommerce-admin/client/tasks/tasks.tsx

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { MenuGroup, MenuItem } from '@wordpress/components';
 import { check } from '@wordpress/icons';
-import { Fragment, useEffect, lazy, Suspense } from '@wordpress/element';
+import { Fragment, useEffect, Suspense } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { ONBOARDING_STORE_NAME, OPTIONS_STORE_NAME } from '@woocommerce/data';
 import { useExperiment } from '@woocommerce/explat';
@@ -15,12 +15,14 @@ import { recordEvent } from '@woocommerce/tracks';
  */
 import { DisplayOption } from '~/activity-panel/display-options';
 import { Task } from './task';
-import { TasksPlaceholder } from './placeholder';
+import { TasksPlaceholder, TasksPlaceholderProps } from './placeholder';
 import './tasks.scss';
 import { TaskListProps } from './task-list';
 import { TaskList } from './task-list';
 import { TaskList as TwoColumnTaskList } from '../two-column-tasks/task-list';
+import TwoColumnTaskListPlaceholder from '../two-column-tasks/placeholder';
 import '../two-column-tasks/style.scss';
+import { getAdminSetting } from '~/utils/admin-settings';
 
 export type TasksProps = {
 	query: { task?: string };
@@ -35,6 +37,17 @@ function getTaskListComponent( taskListId: string ): React.FC< TaskListProps > {
 	}
 }
 
+function getTaskListPlaceholderComponent(
+	taskListId: string
+): React.FC< TasksPlaceholderProps > {
+	switch ( taskListId ) {
+		case 'setup_experiment_1':
+			return TwoColumnTaskListPlaceholder;
+		default:
+			return TasksPlaceholder;
+	}
+}
+
 export const Tasks: React.FC< TasksProps > = ( { query } ) => {
 	const { task } = query;
 	const { hideTaskList } = useDispatch( ONBOARDING_STORE_NAME );
@@ -97,8 +110,13 @@ export const Tasks: React.FC< TasksProps > = ( { query } ) => {
 		return null;
 	}
 
+	const taskListIds = getAdminSetting( 'visibleTaskListIds', [] );
+	const TaskListPlaceholderComponent = getTaskListPlaceholderComponent(
+		taskListIds[ 0 ]
+	);
+
 	if ( isResolving ) {
-		return <TasksPlaceholder query={ query } />;
+		return <TaskListPlaceholderComponent query={ query } />;
 	}
 
 	if ( currentTask ) {
@@ -110,7 +128,7 @@ export const Tasks: React.FC< TasksProps > = ( { query } ) => {
 	}
 
 	if ( isLoadingExperiment ) {
-		return <TasksPlaceholder query={ query } />;
+		return <TaskListPlaceholderComponent query={ query } />;
 	}
 
 	return taskLists

plugins/woocommerce-admin/client/two-column-tasks/placeholder.tsx

@@ -8,7 +8,15 @@ import classnames from 'classnames';
  */
 import './style.scss';
 
-const TaskListPlaceholder = ( props ) => {
+type TasksPlaceholderProps = {
+	numTasks?: number;
+	twoColumns?: boolean;
+	query: {
+		task?: string;
+	};
+};
+
+const TaskListPlaceholder: React.FC< TasksPlaceholderProps > = ( props ) => {
 	const { numTasks = 5, twoColumns = false } = props;
 
 	return (