[wccom-17942] Making sure snackbar doesn't appear before content has loaded.

- Addressing feedback. Renamed `MARKETPLACE_API_HOST` TO `MARKETPLACE_HOST` to make it less confusing – we don't only use it for API URLs.

plugins/woocommerce-admin/client/marketplace/components/constants.ts

@@ -1,5 +1,5 @@
 export const DEFAULT_TAB_KEY = 'discover';
-export const MARKETPLACE_API_HOST = 'https://woocommerce.com';
+export const MARKETPLACE_HOST = 'https://woocommerce.com';
 export const MARKETPLACE_PATH = '/extensions';
 export const MARKETPLACE_SEARCH_API_PATH = '/wp-json/wccom-extensions/1.0/search';
 export const MARKETPLACE_CATEGORY_API_PATH = '/wp-json/wccom-extensions/1.0/categories';

plugins/woocommerce-admin/client/marketplace/components/extensions/extensions.tsx

@@ -18,7 +18,7 @@ import {
 	Product,
 	SearchAPIProductType,
 } from '../product-list/types';
-import { MARKETPLACE_SEARCH_API_PATH, MARKETPLACE_API_HOST } from '../constants';
+import { MARKETPLACE_SEARCH_API_PATH, MARKETPLACE_HOST } from '../constants';
 
 export default function Extensions(): JSX.Element {
 	const [ productList, setProductList ] = useState<Product[]>( [] );
@@ -42,7 +42,7 @@ export default function Extensions(): JSX.Element {
 		}
 
 		const wccomSearchEndpoint =
-			MARKETPLACE_API_HOST +
+			MARKETPLACE_HOST +
 			MARKETPLACE_SEARCH_API_PATH + '?' +
 			params.toString();
 

plugins/woocommerce-admin/client/marketplace/components/footer/footer.tsx

@@ -12,13 +12,13 @@ import { createInterpolateElement } from '@wordpress/element';
 import './footer.scss';
 import IconWithText from '../icon-with-text/icon-with-text';
 import WooIcon from '../../assets/images/woo-icon.svg';
-import { MARKETPLACE_API_HOST } from '../constants';
+import { MARKETPLACE_HOST } from '../constants';
 
 const refundPolicyTitle = createInterpolateElement(
 	__( '30 day <a>money back guarantee</a>', 'woocommerce' ),
 	{
 		// eslint-disable-next-line jsx-a11y/anchor-has-content
-		a: <a href={ MARKETPLACE_API_HOST + '/refund-policy/' } />,
+		a: <a href={ MARKETPLACE_HOST + '/refund-policy/' } />,
 	}
 );
 
@@ -26,7 +26,7 @@ const supportTitle = createInterpolateElement(
 	__( '<a>Get help</a> when you need it', 'woocommerce' ),
 	{
 		// eslint-disable-next-line jsx-a11y/anchor-has-content
-		a: <a href={ MARKETPLACE_API_HOST + '/docs/' } />,
+		a: <a href={ MARKETPLACE_HOST + '/docs/' } />,
 	}
 );
 
@@ -34,7 +34,7 @@ const paymentTitle = createInterpolateElement(
 	__( '<a>Products</a> you can trust', 'woocommerce' ),
 	{
 		// eslint-disable-next-line jsx-a11y/anchor-has-content
-		a: <a href={ MARKETPLACE_API_HOST + '/products/' } />,
+		a: <a href={ MARKETPLACE_HOST + '/products/' } />,
 	}
 );
 

plugins/woocommerce-admin/client/marketplace/components/header-account/header-account.tsx

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 import './header-account.scss';
 import { getAdminSetting } from '../../../utils/admin-settings';
 import HeaderAccountModal from './header-account-modal';
-import { MARKETPLACE_API_HOST } from '../constants';
+import { MARKETPLACE_HOST } from '../constants';
 
 export default function HeaderAccount(): JSX.Element {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
@@ -28,7 +28,7 @@ export default function HeaderAccount(): JSX.Element {
 	// component. That component is either an anchor with href if provided or a button that won't accept an href if no href is provided.
 	// Due to early erroring of TypeScript, it only takes the button version into account which doesn't accept href.
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const accountURL: any = MARKETPLACE_API_HOST + '/my-dashboard/';
+	const accountURL: any = MARKETPLACE_HOST + '/my-dashboard/';
 	const accountOrConnect = isConnected ? accountURL : connectionURL;
 
 	const avatar = () => {

plugins/woocommerce-admin/client/marketplace/utils/functions.tsx

@@ -7,7 +7,7 @@ import apiFetch from '@wordpress/api-fetch';
  * Internal dependencies
  */
 import { Product } from '../components/product-list/types';
-import { MARKETPLACE_API_HOST, MARKETPLACE_CATEGORY_API_PATH } from '../components/constants';
+import { MARKETPLACE_HOST, MARKETPLACE_CATEGORY_API_PATH } from '../components/constants';
 import { CategoryAPIItem } from '../components/category-selector/types';
 import { LOCALE } from '../../utils/admin-settings';
 
@@ -34,7 +34,7 @@ async function fetchDiscoverPageData(): Promise< ProductGroup[] > {
 }
 
 function fetchCategories(): Promise< CategoryAPIItem[] > {
-	let url = MARKETPLACE_API_HOST + MARKETPLACE_CATEGORY_API_PATH;
+	let url = MARKETPLACE_HOST + MARKETPLACE_CATEGORY_API_PATH;
 
 	if ( LOCALE.userLocale ) {
 		url = `${ url }?locale=${ LOCALE.userLocale }`;