woocommerce/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list-placeho...

76 lines
2.3 KiB
TypeScript
Raw Normal View History

/**
* Internal dependencies
*/
import './style.scss';
type TasksPlaceholderProps = {
numTasks?: number;
query: {
task?: string;
};
};
const SectionedTaskListPlaceholder: React.FC< TasksPlaceholderProps > = (
props
) => {
const { numTasks = 3 } = props;
return (
<div
className={
'woocommerce-task-dashboard__container woocommerce-sectioned-task-list'
}
>
<div className="components-card is-size-large woocommerce-task-card woocommerce-homescreen-card is-loading ">
<div className="components-card__header is-size-medium">
<div className="wooocommerce-task-card__header">
<div className="is-placeholder"> </div>
</div>
</div>
<ul className="woocommerce-experimental-list">
{ Array.from( new Array( numTasks ) ).map( ( v, i ) => (
<li
tabIndex={ i }
key={ i }
className="woocommerce-experimental-list__item woocommerce-task-list__item"
>
<div className="woocommerce-task-list__item-before">
<div className="is-placeholder"></div>
</div>
<div className="woocommerce-task-list__item-text">
<div className="components-truncate components-text is-placeholder"></div>
</div>
</li>
) ) }
</ul>
</div>
<div className="is-loading components-panel__body woocommerce-task-card">
<div className="components-panel__body-title">
<div className="components-button components-panel__body-toggle">
<div className="woocommerce-task-list__item-text">
<div className="components-truncate components-text is-placeholder"></div>
</div>
<div className="woocommerce-task-list__item-after">
<div className="is-placeholder"></div>
</div>
</div>
</div>
</div>
<div className="is-loading components-panel__body woocommerce-task-card">
<div className="components-panel__body-title">
<div className="components-button components-panel__body-toggle">
<div className="woocommerce-task-list__item-text">
<div className="components-truncate components-text is-placeholder"></div>
</div>
<div className="woocommerce-task-list__item-after">
<div className="is-placeholder"></div>
</div>
</div>
</div>
</div>
</div>
);
};
export { SectionedTaskListPlaceholder };