diff --git a/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js b/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js
index bc04700152..52dd175881 100644
--- a/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js
+++ b/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js
@@ -1,18 +1,28 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { createTestInstance } from '@magento/peregrine';
+import { useQuery } from '@apollo/react-hooks';
 
 import { useCartPage } from '../useCartPage';
 
+jest.mock('react', () => {
+    const React = jest.requireActual('react');
+    const spy = jest.spyOn(React, 'useState');
+
+    return {
+        ...React,
+        useState: spy
+    };
+});
+
 jest.mock('@apollo/react-hooks', () => {
-    const runQuery = jest.fn();
     const queryResult = {
+        called: false,
         data: null,
-        error: null,
         loading: false
     };
-    const useLazyQuery = jest.fn(() => [runQuery, queryResult]);
+    const useQuery = jest.fn(() => queryResult);
 
-    return { useLazyQuery };
+    return { useQuery };
 });
 
 jest.mock('@magento/peregrine/lib/context/app', () => {
@@ -67,6 +77,43 @@ test('it returns the proper shape', () => {
         handleSignIn: expect.any(Function),
         isCartUpdating: expect.any(Boolean),
         isSignedIn: expect.any(Boolean),
-        setIsCartUpdating: expect.any(Function)
+        setIsCartUpdating: expect.any(Function),
+        shouldShowLoadingIndicator: expect.any(Boolean)
     });
 });
+
+test('it calls setIsCartUpdating true when loading is true', () => {
+    // Arrange.
+    useQuery.mockReturnValueOnce({
+        called: true,
+        data: { cart: { total_quantity: 0 } },
+        loading: true
+    });
+    // isCartUpdating
+    useState.mockReturnValueOnce([false, jest.fn()]);
+
+    // Act.
+    createTestInstance(<Component />);
+
+    // Assert.
+    const { setIsCartUpdating } = log.mock.calls[0][0];
+    expect(setIsCartUpdating).toBeCalledWith(true);
+});
+
+test('it calls setIsCartUpdating false when loading is false', () => {
+    // Arrange.
+    useQuery.mockReturnValueOnce({
+        called: true,
+        data: { cart: { total_quantity: 0 } },
+        loading: false
+    });
+    // isCartUpdating
+    useState.mockReturnValueOnce([false, jest.fn()]);
+
+    // Act.
+    createTestInstance(<Component />);
+
+    // Assert.
+    const { setIsCartUpdating } = log.mock.calls[0][0];
+    expect(setIsCartUpdating).toBeCalledWith(false);
+});
diff --git a/packages/peregrine/lib/talons/CartPage/useCartPage.js b/packages/peregrine/lib/talons/CartPage/useCartPage.js
index e026777cca..2ce2d33f9f 100644
--- a/packages/peregrine/lib/talons/CartPage/useCartPage.js
+++ b/packages/peregrine/lib/talons/CartPage/useCartPage.js
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useLazyQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/react-hooks';
 
 import { useAppContext } from '@magento/peregrine/lib/context/app';
 import { useUserContext } from '@magento/peregrine/lib/context/user';
@@ -16,10 +16,11 @@ export const useCartPage = props => {
 
     const [isCartUpdating, setIsCartUpdating] = useState(false);
 
-    const [fetchCartData, { data }] = useLazyQuery(getCartDetails, {
-        // TODO: Purposely overfetch and hit the network until all components
-        // are correctly updating the cache. Will be fixed by PWA-321.
-        fetchPolicy: 'cache-and-network'
+    const { called, data, loading } = useQuery(getCartDetails, {
+        fetchPolicy: 'cache-and-network',
+        // Don't make this call if we don't have a cartId
+        skip: !cartId,
+        variables: { cartId }
     });
 
     const handleSignIn = useCallback(() => {
@@ -28,20 +29,19 @@ export const useCartPage = props => {
     }, [toggleDrawer]);
 
     useEffect(() => {
-        if (cartId) {
-            fetchCartData({
-                variables: {
-                    cartId
-                }
-            });
-        }
-    }, [cartId, fetchCartData]);
+        // Let the cart page know it is updating while we're waiting on network data.
+        setIsCartUpdating(loading);
+    }, [loading]);
+
+    const hasItems = !!(data && data.cart.total_quantity);
+    const shouldShowLoadingIndicator = called && loading && !hasItems;
 
     return {
-        hasItems: !!(data && data.cart.total_quantity),
+        hasItems,
         handleSignIn,
         isSignedIn,
         isCartUpdating,
-        setIsCartUpdating
+        setIsCartUpdating,
+        shouldShowLoadingIndicator
     };
 };
diff --git a/packages/venia-ui/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap b/packages/venia-ui/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap
index 8d20aa53a3..983c165bb7 100644
--- a/packages/venia-ui/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap
@@ -1,5 +1,75 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders a loading indicator when talon indicates 1`] = `
+<div>
+  <span>
+    <svg
+      fill="none"
+      height={64}
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width={64}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <line
+        x1="12"
+        x2="12"
+        y1="2"
+        y2="6"
+      />
+      <line
+        x1="12"
+        x2="12"
+        y1="18"
+        y2="22"
+      />
+      <line
+        x1="4.93"
+        x2="7.76"
+        y1="4.93"
+        y2="7.76"
+      />
+      <line
+        x1="16.24"
+        x2="19.07"
+        y1="16.24"
+        y2="19.07"
+      />
+      <line
+        x1="2"
+        x2="6"
+        y1="12"
+        y2="12"
+      />
+      <line
+        x1="18"
+        x2="22"
+        y1="12"
+        y2="12"
+      />
+      <line
+        x1="4.93"
+        x2="7.76"
+        y1="19.07"
+        y2="16.24"
+      />
+      <line
+        x1="16.24"
+        x2="19.07"
+        y1="7.76"
+        y2="4.93"
+      />
+    </svg>
+  </span>
+  <span>
+    Fetching Data...
+  </span>
+</div>
+`;
+
 exports[`renders components if cart has items 1`] = `
 <div>
   <div>
@@ -7,7 +77,7 @@ exports[`renders components if cart has items 1`] = `
       Cart
     </h1>
     <button
-      onClick={[Function]}
+      onClick={[MockFunction]}
       type="button"
     >
       <span>
@@ -18,12 +88,12 @@ exports[`renders components if cart has items 1`] = `
   <div>
     <div>
       <ProductListing
-        setIsCartUpdating={[Function]}
+        setIsCartUpdating={[MockFunction]}
       />
     </div>
     <div>
       <PriceAdjustments
-        setIsCartUpdating={[Function]}
+        setIsCartUpdating={[MockFunction]}
       />
     </div>
     <div>
@@ -44,7 +114,7 @@ exports[`renders empty cart text (no adjustments, list or summary) if cart is em
       Cart
     </h1>
     <button
-      onClick={[Function]}
+      onClick={[MockFunction]}
       type="button"
     >
       <span>
diff --git a/packages/venia-ui/lib/components/CartPage/__tests__/cartPage.spec.js b/packages/venia-ui/lib/components/CartPage/__tests__/cartPage.spec.js
index 442bdafcc9..5afb3c8534 100644
--- a/packages/venia-ui/lib/components/CartPage/__tests__/cartPage.spec.js
+++ b/packages/venia-ui/lib/components/CartPage/__tests__/cartPage.spec.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { createTestInstance } from '@magento/peregrine';
-import { useLazyQuery } from '@apollo/react-hooks';
+import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage';
 
 import CartPage from '../cartPage';
 import { HeadProvider } from '../../Head';
@@ -10,43 +10,23 @@ jest.mock('../PriceAdjustments', () => 'PriceAdjustments');
 jest.mock('../PriceSummary', () => 'PriceSummary');
 jest.mock('../ProductListing', () => 'ProductListing');
 
-jest.mock('@apollo/react-hooks', () => {
-    const runQuery = jest.fn();
-    const queryResult = {
-        data: null,
-        error: null,
-        loading: false
-    };
-    const useLazyQuery = jest.fn(() => [runQuery, queryResult]);
-
-    return { useLazyQuery };
-});
-
-jest.mock('@magento/peregrine/lib/context/app', () => {
-    const api = {
-        toggleDrawer: jest.fn()
-    };
-    const state = {};
-    const useAppContext = jest.fn(() => [state, api]);
-
-    return { useAppContext };
-});
-
-jest.mock('@magento/peregrine/lib/context/cart', () => {
-    const api = {};
-    const state = { cartId: 'cart123' };
-    const useCartContext = jest.fn(() => [state, api]);
+jest.mock('@magento/peregrine/lib/talons/CartPage/useCartPage', () => {
+    const useCartPageTalon = jest.requireActual(
+        '@magento/peregrine/lib/talons/CartPage/useCartPage'
+    );
+    const spy = jest.spyOn(useCartPageTalon, 'useCartPage');
 
-    return { useCartContext };
+    return Object.assign(useCartPageTalon, { useCartPage: spy });
 });
 
-jest.mock('@magento/peregrine/lib/context/user', () => {
-    const api = {};
-    const state = { isSignedIn: false };
-    const useUserContext = jest.fn(() => [state, api]);
-
-    return { useUserContext };
-});
+const talonProps = {
+    hasItems: false,
+    handleSignIn: jest.fn(),
+    isSignedIn: false,
+    isCartUpdating: false,
+    setIsCartUpdating: jest.fn(),
+    shouldShowLoadingIndicator: false
+};
 
 beforeAll(() => {
     /**
@@ -64,23 +44,37 @@ afterAll(() => {
     ReactDOM.createPortal.mockClear();
 });
 
+test('renders a loading indicator when talon indicates', () => {
+    // Arrange.
+    const myTalonProps = {
+        ...talonProps,
+        shouldShowLoadingIndicator: true
+    };
+    useCartPage.mockReturnValueOnce(myTalonProps);
+
+    // Act.
+    const instance = createTestInstance(
+        <HeadProvider>
+            <CartPage />
+        </HeadProvider>
+    );
+
+    // Assert.
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
 test('renders empty cart text (no adjustments, list or summary) if cart is empty', () => {
-    useLazyQuery.mockReturnValueOnce([
-        jest.fn(),
-        {
-            data: {
-                cart: {
-                    total_quantity: 0
-                }
-            }
-        }
-    ]);
+    // Arrange.
+    useCartPage.mockReturnValueOnce(talonProps);
 
+    // Act.
     const instance = createTestInstance(
         <HeadProvider>
             <CartPage />
         </HeadProvider>
     );
+
+    // Assert.
     expect(document.getElementsByTagName('title')[0].innerHTML).toBe(
         'Cart - Venia'
     );
@@ -88,22 +82,21 @@ test('renders empty cart text (no adjustments, list or summary) if cart is empty
 });
 
 test('renders components if cart has items', () => {
-    useLazyQuery.mockReturnValueOnce([
-        jest.fn(),
-        {
-            data: {
-                cart: {
-                    total_quantity: 1
-                }
-            }
-        }
-    ]);
+    // Arrange.
+    const myTalonProps = {
+        ...talonProps,
+        hasItems: true
+    };
+    useCartPage.mockReturnValueOnce(myTalonProps);
 
+    // Act.
     const instance = createTestInstance(
         <HeadProvider>
             <CartPage />
         </HeadProvider>
     );
+
+    // Assert.
     expect(document.getElementsByTagName('title')[0].innerHTML).toBe(
         'Cart - Venia'
     );
diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.js b/packages/venia-ui/lib/components/CartPage/cartPage.js
index 39bedd7a8b..7a799e88ff 100644
--- a/packages/venia-ui/lib/components/CartPage/cartPage.js
+++ b/packages/venia-ui/lib/components/CartPage/cartPage.js
@@ -1,9 +1,10 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage';
 
 import { Title } from '../../components/Head';
 import Button from '../Button';
+import { fullPageLoadingIndicator } from '../LoadingIndicator';
 
 import PriceAdjustments from './PriceAdjustments';
 import PriceSummary from './PriceSummary';
@@ -24,22 +25,25 @@ const CartPage = props => {
         hasItems,
         isSignedIn,
         isCartUpdating,
-        setIsCartUpdating
+        setIsCartUpdating,
+        shouldShowLoadingIndicator
     } = talonProps;
 
     const classes = mergeClasses(defaultClasses, props.classes);
 
-    const signInDisplay = useMemo(() => {
-        return !isSignedIn ? (
-            <Button
-                className={classes.sign_in}
-                onClick={handleSignIn}
-                priority="high"
-            >
-                {'Sign In'}
-            </Button>
-        ) : null;
-    }, [classes.sign_in, handleSignIn, isSignedIn]);
+    if (shouldShowLoadingIndicator) {
+        return fullPageLoadingIndicator;
+    }
+
+    const signInDisplay = !isSignedIn ? (
+        <Button
+            className={classes.sign_in}
+            onClick={handleSignIn}
+            priority="high"
+        >
+            {'Sign In'}
+        </Button>
+    ) : null;
 
     const productListing = hasItems ? (
         <ProductListing setIsCartUpdating={setIsCartUpdating} />