fix: ci / eslint, typescript

src/wizards/newspack/views/settings/display-settings/author-bio.tsx

@@ -6,7 +6,7 @@ import { Grid, TextControl } from '../../../../../components/src';
 export default function AuthorBio( {
 	update,
 	data,
-}: SectionComponentProps< DisplaySettings > ) {
+}: ThemeModComponentProps< DisplaySettings > ) {
 	return (
 		<Grid gutter={ 32 }>
 			<Grid columns={ 1 } gutter={ 16 }>

src/wizards/newspack/views/settings/display-settings/index.tsx

@@ -23,7 +23,7 @@ export default function DisplaySettings() {
 	const [ data, setData ] =
 		hooks.useObjectState< DisplaySettings >( DEFAULT_THEME_MODS );
 
-	const { wizardApiFetch } = useWizardApiFetch(
+	const { wizardApiFetch, isFetching } = useWizardApiFetch(
 		'newspack-settings/display-settings'
 	);
 
@@ -63,8 +63,11 @@ export default function DisplaySettings() {
 	}
 
 	return (
-		<WizardsTab title={ __( 'Display Settings', 'newspack-plugin' ) }>
-			<pre>{ JSON.stringify( data, null, 2 ) }</pre>
+		<WizardsTab
+			title={ __( 'Display Settings', 'newspack-plugin' ) }
+			className={ isFetching ? 'is-fetching' : '' }
+		>
+			{ /* <pre>{ JSON.stringify( data, null, 2 ) }</pre> */ }
 			<WizardSection title={ __( 'Recirculation', 'newspack-plugin' ) }>
 				<Recirculation update={ setData } data={ data } />
 			</WizardSection>

src/wizards/wizards-action-card.tsx

@@ -15,16 +15,15 @@ const WizardsActionCard = ( {
 	children,
 	...props
 }: ActionCardProps ) => {
+	let checkbox: 'checked' | 'unchecked' | undefined;
+	if ( typeof isChecked !== 'undefined' ) {
+		checkbox = isChecked ? 'checked' : 'unchecked';
+	}
 	return (
 		<ActionCard
 			{ ...{
 				description,
-				checkbox:
-					typeof isChecked === 'undefined'
-						? undefined
-						: isChecked
-						? 'checked'
-						: 'unchecked',
+				checkbox,
 				notification: error,
 				notificationLevel,
 				...props,

src/wizards/wizards-tab.tsx

@@ -5,15 +5,21 @@
 function WizardsTab( {
 	title,
 	children,
+	isFetching,
 	...props
 }: {
 	title: string;
 	children: React.ReactNode;
+	isFetching?: boolean;
 	className?: string;
 } ) {
 	const className = props.className || '';
 	return (
-		<div className={ `${ className } newspack-wizard__sections` }>
+		<div
+			className={ `${
+				isFetching ? '' : 'is-fetching'
+			} ${ className } newspack-wizard__sections` }
+		>
 			<h1>{ title }</h1>
 			{ children }
 		</div>