diff --git a/src/app/images/views/ImageList/ImageListHeader/ImageListHeader.tsx b/src/app/images/views/ImageList/ImageListHeader/ImageListHeader.tsx index 04f2a1f9ed..9a25afcd2b 100644 --- a/src/app/images/views/ImageList/ImageListHeader/ImageListHeader.tsx +++ b/src/app/images/views/ImageList/ImageListHeader/ImageListHeader.tsx @@ -1,7 +1,7 @@ +import { MainToolbar } from "@canonical/maas-react-components"; import { Icon, Spinner } from "@canonical/react-components"; import { useDispatch, useSelector } from "react-redux"; -import SectionHeader from "app/base/components/SectionHeader"; import SwitchField from "app/base/components/SwitchField"; import TooltipButton from "app/base/components/TooltipButton"; import { useFetchActions, useCycled } from "app/base/hooks"; @@ -55,53 +55,54 @@ const ImageListHeader = (): JSX.Element => { useFetchActions([configActions.fetch]); return ( - - {configSaving && ( -
- -
- )} - - {Labels.AutoSyncImages} - - - } - onChange={() => { - dispatch(configActions.cleanup()); - dispatch( - configActions.update({ - boot_images_auto_import: !autoImport, - }) - ); - }} - wrapperClassName="u-flex--align-center" + + Images + {configLoaded ? ( +
+ {configSaving && ( +
+ +
+ )} + + {Labels.AutoSyncImages} + -
, - ] - : null - } - subtitle={generateImportStatus(rackImportRunning, regionImportRunning)} - subtitleLoading={polling && !hasPolled} - title="Images" - /> + + } + onChange={() => { + dispatch(configActions.cleanup()); + dispatch( + configActions.update({ + boot_images_auto_import: !autoImport, + }) + ); + }} + wrapperClassName="u-flex--align-center" + /> + + ) : null} + {polling && !hasPolled ? ( + + ) : ( + + {generateImportStatus(rackImportRunning, regionImportRunning)} + + )} +
); };