diff --git a/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/card.js b/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/card.js
new file mode 100644
index 00000000000..869be9283a2
--- /dev/null
+++ b/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/card.js
@@ -0,0 +1,43 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+
+/**
+ * WooCommerce dependencies
+ */
+import { Link, ProductImage } from '@woocommerce/components';
+
+/**
+ * Internal dependencies
+ */
+import { ActivityCard } from '../../activity-card';
+
+class ProductStockCard extends Component {
+ render() {
+ const { product } = this.props;
+ const title = (
+
+ { product.name }
+
+ );
+
+ return (
+ }
+ actions={ }
+ >
+
+ { sprintf( __( '%d in stock', 'woocommerce-admin' ), product.stock_quantity ) }
+
+
+ );
+ }
+}
+
+export default ProductStockCard;
diff --git a/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js b/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js
index a293944cafd..162fcff960a 100644
--- a/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js
+++ b/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js
@@ -2,52 +2,49 @@
/**
* External dependencies
*/
-import { __, sprintf } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
import { Component, Fragment } from '@wordpress/element';
/**
* WooCommerce dependencies
*/
-import { Link, ProductImage, Section } from '@woocommerce/components';
+import { Section } from '@woocommerce/components';
/**
* Internal dependencies
*/
-import { ActivityCard } from '../../activity-card';
+import { ActivityCardPlaceholder } from '../../activity-card';
import ActivityHeader from '../../activity-header';
+import ProductStockCard from './card';
class StockPanel extends Component {
render() {
- const product = {
- id: 913,
- name: 'Octopus Tshirt',
- permalink: '',
- image: {
- src: '/wp-content/uploads/2018/12/img-206939428-150x150.png',
+ const products = [
+ {
+ id: 913,
+ name: 'Octopus Tshirt',
+ permalink: '',
+ image: {
+ src: '/wp-content/uploads/2018/12/img-206939428-150x150.png',
+ },
+ stock_quantity: 2,
},
- stock_quantity: 2,
- };
- const title = (
-
- { product.name }
-
- );
+ ];
+ const isRequesting = false;
return (
- }
- actions={ }
- >
-
- { sprintf( __( '%d in stock', 'woocommerce-admin' ), product.stock_quantity ) }
-
-
+ { isRequesting ? (
+
+ ) : (
+ products.map( product => )
+ ) }
);