Force mobile skeleton on phone devices

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- Desktop skeleton appearing on phone screens.
+
 ## [0.14.3] - 2019-11-25
 
 ### Fixed

manifest.json

@@ -17,7 +17,9 @@
     "vtex.styleguide": "9.x",
     "vtex.format-currency": "0.x",
     "vtex.formatted-price": "0.x",
-    "vtex.flex-layout": "0.x"
+    "vtex.flex-layout": "0.x",
+    "vtex.device-detector": "0.x",
+    "vtex.order-manager": "0.x"
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

react/ProductListWrapper.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { ExtensionPoint } from 'vtex.render-runtime'
 import { SizeMe } from 'react-sizeme'
+import { useDevice } from 'vtex.device-detector'
+import { useOrderForm } from 'vtex.order-manager/OrderForm'
 
 const MAX_MOBILE_WIDTH = 640
 
@@ -11,10 +13,14 @@ interface Props {
 }
 
 const ProductListWrapper: StorefrontFunctionComponent<Props> = props => {
+  const { loading } = useOrderForm()
+  const { device } = useDevice()
+
   return (
     <SizeMe noPlaceholder={true}>
       {({ size }) =>
-        size.width && size.width < MAX_MOBILE_WIDTH ? (
+        (loading && device === 'phone') ||
+        (size.width && size.width < MAX_MOBILE_WIDTH) ? (
           <ExtensionPoint id="product-list-content-mobile" {...props} />
         ) : (
           <ExtensionPoint id="product-list-content-desktop" {...props} />