LoadingCard // add leaf-beat.svg loading icon.

inpsyde · Jul 29, 2024 · d1d2b17 · d1d2b17
1 parent 8c8456a
commit d1d2b17
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/resources/images/leaf-beat.svg b/resources/images/leaf-beat.svg
diff --git a/resources/ts/components/LoadingCard/index.tsx b/resources/ts/components/LoadingCard/index.tsx
@@ -1,13 +1,29 @@
 /**
  * WordPress dependencies
  */
-import { Card, CardBody, Spinner } from '@wordpress/components';
+import {
+	Card,
+	CardBody,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { ReactComponent as LeafBeat } from '../../../images/leaf-beat.svg';
 
 export const LoadingCard: FunctionComponent = () => {
 	return (
 		<Card>
 			<CardBody>
-				<Spinner />
+				<HStack justify="start" spacing="4">
+					<LeafBeat />
+					<Text size="large">
+						{ __( 'Loading…', 'inpsyde-google-tag-manager' ) }
+					</Text>
+				</HStack>
 			</CardBody>
 		</Card>
 	);