import HeaderActions from '../components/HeaderActions';
import HeaderAvatar from '../components/HeaderAvatar';
import HeaderContainer from '../components/HeaderContainer';
import HeaderExtraActions from '../components/HeaderExtraActions';
import HeaderIconButton from '../components/HeaderIconButton';
import HeaderInfo from '../components/HeaderInfo';
import HeaderMainActions from '../components/HeaderMainActions';
import HeaderPill from '../components/HeaderPill';
import HeaderTitle from '../components/HeaderTitle';

export const TaskFocusSkeleton = () => (
  <HeaderContainer>
    <HeaderInfo>
      <HeaderIconButton loading />
      <HeaderAvatar loading />
      <HeaderTitle
        title=""
        loading
      />
      <HeaderPill loading />
    </HeaderInfo>
    <HeaderActions>
      <HeaderMainActions loading />
      <HeaderExtraActions loading />
      <HeaderIconButton loading />
    </HeaderActions>
  </HeaderContainer>
);
