diff --git a/packages/api-client/src/api/cartTotalQty/cartTotalQty.ts b/packages/api-client/src/api/cartTotalQty/cartTotalQty.ts
new file mode 100644
index 000000000..8eac89fd1
--- /dev/null
+++ b/packages/api-client/src/api/cartTotalQty/cartTotalQty.ts
@@ -0,0 +1,9 @@
+import gql from 'graphql-tag';
+
+export default gql`
+  query cart($cartId: String!) {
+    cart(cart_id:$cartId) {
+      total_quantity
+    }
+  }
+`;
diff --git a/packages/api-client/src/api/cartTotalQty/index.ts b/packages/api-client/src/api/cartTotalQty/index.ts
new file mode 100644
index 000000000..9cdcee016
--- /dev/null
+++ b/packages/api-client/src/api/cartTotalQty/index.ts
@@ -0,0 +1,25 @@
+import { ApolloQueryResult } from '@apollo/client/core';
+import { CustomQuery } from '@vue-storefront/core';
+import { CartQuery, CartQueryVariables } from '../../types/GraphQL';
+import cart from './cartTotalQty';
+import { Context } from '../../types/context';
+
+export default async (
+  context: Context,
+  cartId: string,
+  customQuery: CustomQuery = { cart: 'cart' },
+): Promise<ApolloQueryResult<CartQuery>> => {
+  const { cart: cartGQL } = context.extendQuery(
+    customQuery,
+    {
+      cart: {
+        query: cart,
+        variables: { cartId },
+      },
+    },
+  );
+  return context.client.query<CartQuery, CartQueryVariables>({
+    query: cartGQL.query,
+    variables: cartGQL.variables,
+  });
+};
diff --git a/packages/api-client/src/api/index.ts b/packages/api-client/src/api/index.ts
index 62cf07f2d..cf9830eeb 100644
--- a/packages/api-client/src/api/index.ts
+++ b/packages/api-client/src/api/index.ts
@@ -8,6 +8,7 @@ export { default as addVirtualProductsToCart } from './addVirtualProductsToCart'
 export { default as applyCouponToCart } from './applyCouponToCart';
 export { default as availableStores } from './availableStores';
 export { default as cart } from './cart';
+export { default as cartTotalQty } from './cartTotalQty';
 export { default as categoryList } from './categoryList';
 export { default as categorySearch } from './categorySearch';
 export { default as changeCustomerPassword } from './changeCustomerPassword';
diff --git a/packages/api-client/src/types/API.ts b/packages/api-client/src/types/API.ts
index 3ee9c00bd..95e0226bf 100644
--- a/packages/api-client/src/types/API.ts
+++ b/packages/api-client/src/types/API.ts
@@ -212,6 +212,11 @@ export interface MagentoApiMethods {
     customQuery?: CustomQuery
   ): Promise<ApolloQueryResult<CartQuery>>;
 
+  cartTotalQty(
+    cartId: string,
+    customQuery?: CustomQuery
+  ): Promise<ApolloQueryResult<CartQuery>>;
+
   categoryList(
     categoryFilter?: CategoryListQueryVariables,
     customQuery?: CustomQuery
diff --git a/packages/composables/src/composables/useCart/index.ts b/packages/composables/src/composables/useCart/index.ts
index 6383819e0..452deac9e 100644
--- a/packages/composables/src/composables/useCart/index.ts
+++ b/packages/composables/src/composables/useCart/index.ts
@@ -384,6 +384,12 @@ const factoryParams: UseCartFactoryParams<Cart, CartItem, Product> = {
       product,
     },
   ) => !!currentCart?.items.find((cartItem) => cartItem?.product?.uid === product.uid),
+  loadTotalQty: async (context: Context) => {
+    const apiState = context.$magento.config.state;
+    const { data } : any = await context.$magento.api.cartTotalQty(apiState.getCartId());
+
+    return data.cart.total_quantity;
+  },
 };
 
 export default useCartFactory<Cart, CartItem, Product>(factoryParams);
diff --git a/packages/composables/src/factories/useCartFactory.ts b/packages/composables/src/factories/useCartFactory.ts
index b8a4e3429..55d7d3eeb 100644
--- a/packages/composables/src/factories/useCartFactory.ts
+++ b/packages/composables/src/factories/useCartFactory.ts
@@ -1,10 +1,12 @@
 import {
-  CustomQuery, UseCart, Context, FactoryParams, UseCartErrors, PlatformApi, sharedRef, Logger, configureFactoryParams, ComposableFunctionArgs,
+  UseCart as UseCartCore, Context, FactoryParams, UseCartErrors as UseCartErrorsCore, PlatformApi, sharedRef, Logger, configureFactoryParams, ComposableFunctionArgs,
 } from '@vue-storefront/core';
 import { computed, Ref } from '@vue/composition-api';
+import { ComputedProperty, CustomQuery } from '@vue-storefront/core/lib/src/types';
 
 export interface UseCartFactoryParams<CART, CART_ITEM, PRODUCT, API extends PlatformApi = any> extends FactoryParams<API> {
   load: (context: Context, params: ComposableFunctionArgs<{ realCart?: boolean; }>) => Promise<CART>;
+  loadTotalQty: (context: Context) => Promise<number>;
   addItem: (
     context: Context,
     params: ComposableFunctionArgs<{
@@ -27,11 +29,22 @@ export interface UseCartFactoryParams<CART, CART_ITEM, PRODUCT, API extends Plat
   isInCart: (context: Context, params: { currentCart: CART; product: PRODUCT }) => boolean;
 }
 
+export interface UseCart<CART, CART_ITEM, PRODUCT, API extends PlatformApi = any> extends UseCartCore<CART, CART_ITEM, PRODUCT, API> {
+  totalQuantity: ComputedProperty<number>,
+  loadTotalQty(params: {
+    customQuery?: CustomQuery;
+  }): Promise<void>;
+}
+export interface UseCartErrors extends UseCartErrorsCore {
+  loadTotalQty: Error
+}
+
 export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi = any>(
   factoryParams: UseCartFactoryParams<CART, CART_ITEM, PRODUCT, API>,
 ) => function useCart(): UseCart<CART, CART_ITEM, PRODUCT, API> {
   const loading: Ref<boolean> = sharedRef(false, 'useCart-loading');
   const cart: Ref<CART> = sharedRef(null, 'useCart-cart');
+  const totalQuantity: Ref<number> = sharedRef(0, 'useCart-totalQuantity');
   const error: Ref<UseCartErrors> = sharedRef({
     addItem: null,
     removeItem: null,
@@ -40,6 +53,7 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
     clear: null,
     applyCoupon: null,
     removeCoupon: null,
+    loadTotalQty: null,
   }, 'useCart-error');
 
   // eslint-disable-next-line no-underscore-dangle,@typescript-eslint/naming-convention
@@ -78,6 +92,7 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
       });
       error.value.addItem = null;
       cart.value = updatedCart;
+      totalQuantity.value = updatedCart.total_quantity;
     } catch (err) {
       error.value.addItem = err;
       Logger.error('useCart/addItem', err);
@@ -101,6 +116,7 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
       });
       error.value.removeItem = null;
       cart.value = updatedCart;
+      totalQuantity.value = updatedCart.total_quantity;
     } catch (err) {
       error.value.removeItem = err;
       Logger.error('useCart/removeItem', err);
@@ -130,6 +146,7 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
         });
         error.value.updateItemQty = null;
         cart.value = updatedCart;
+        totalQuantity.value = updatedCart.total_quantity;
       } catch (err) {
         error.value.updateItemQty = err;
         Logger.error('useCart/updateItemQty', err);
@@ -150,11 +167,14 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
       loading.value = false;
       error.value.load = null;
       cart.value = { ...cart.value };
+
       return;
     }
     try {
       loading.value = true;
-      cart.value = await _factoryParams.load({ customQuery });
+      const loadedCart = await _factoryParams.load({ customQuery });
+      cart.value = loadedCart;
+      totalQuantity.value = loadedCart.total_quantity;
       error.value.load = null;
     } catch (err) {
       error.value.load = err;
@@ -164,6 +184,21 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
     }
   };
 
+  const loadTotalQty = async ({ customQuery } = { customQuery: undefined }) => {
+    Logger.debug('useCart.loadTotalQty');
+
+    try {
+      loading.value = true;
+      totalQuantity.value = await _factoryParams.loadTotalQty({ customQuery });
+      error.value.loadTotalQty = null;
+    } catch (err) {
+      error.value.loadTotalQty = err;
+      Logger.error('useCart/loadTotalQty', err);
+    } finally {
+      loading.value = false;
+    }
+  };
+
   const clear = async () => {
     Logger.debug('useCart.clear');
 
@@ -172,6 +207,7 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
       const updatedCart = await _factoryParams.clear({ currentCart: cart.value });
       error.value.clear = null;
       cart.value = updatedCart;
+      totalQuantity.value = updatedCart.total_quantity;
     } catch (err) {
       error.value.clear = err;
       Logger.error('useCart/clear', err);
@@ -236,9 +272,11 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
     api: _factoryParams.api,
     setCart,
     cart: computed(() => cart.value),
+    totalQuantity,
     isInCart,
     addItem,
     load,
+    loadTotalQty,
     removeItem,
     clear,
     updateItemQty,
diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
index 0719005ad..eff73e1c2 100644
--- a/packages/theme/components/AppHeader.vue
+++ b/packages/theme/components/AppHeader.vue
@@ -171,7 +171,6 @@ import {
   SfOverlay,
 } from '@storefront-ui/vue';
 import {
-  cartGetters,
   categoryGetters,
   useCart,
   useCategory,
@@ -187,8 +186,8 @@ import {
   defineComponent,
   useRouter,
   useContext,
+  useAsync,
 } from '@nuxtjs/composition-api';
-import { onSSR } from '@vue-storefront/core';
 import { clickOutside } from '@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js';
 import {
   mapMobileObserver,
@@ -221,12 +220,11 @@ export default defineComponent({
     const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
     const { setTermForUrl, getFacetsFromURL, getAgnosticCatLink } = useUiHelpers();
     const { isAuthenticated } = useUser();
-    const { cart } = useCart();
+    const { totalQuantity, loadTotalQty } = useCart();
     const { wishlist } = useWishlist('GlobalWishlist');
     const {
       result: searchResult,
       search: productsSearch,
-      // loading: productsLoading,
     } = useFacet('AppHeader:Products');
     const {
       result: categories,
@@ -245,11 +243,6 @@ export default defineComponent({
     const wishlistHasProducts = computed(() => wishlistGetters.getTotalItems(wishlist.value) > 0);
     const wishlistItemsQty = computed(() => wishlistGetters.getTotalItems(wishlist.value));
 
-    const cartTotalItems = computed(() => {
-      const count = cartGetters.getTotalItems(cart.value);
-      return count ? count.toString() : null;
-    });
-
     const accountIcon = computed(() => (isAuthenticated.value ? 'profile_fill' : 'profile'));
 
     const categoryTree = computed(() => categoryGetters.getCategoryTree(categoryList.value?.[0])?.items.filter((c) => c.count > 0));
@@ -262,10 +255,8 @@ export default defineComponent({
       }
     };
 
-    onSSR(async () => {
-      await categoriesListSearch({
-        pageSize: 20,
-      });
+    useAsync(async () => {
+      await Promise.all([loadTotalQty(), categoriesListSearch({ pageSize: 20 })]);
     });
 
     const showSearch = () => {
@@ -332,7 +323,7 @@ export default defineComponent({
 
     return {
       accountIcon,
-      cartTotalItems,
+      cartTotalItems: totalQuantity,
       categoryTree,
       closeOrFocusSearchBar,
       closeSearch,
diff --git a/packages/theme/components/CartSidebar.vue b/packages/theme/components/CartSidebar.vue
index 8c28dbe61..ad3928ba8 100644
--- a/packages/theme/components/CartSidebar.vue
+++ b/packages/theme/components/CartSidebar.vue
@@ -38,7 +38,7 @@
       >
         <div class="notifications">
           <SfNotification
-            v-if="!isLoaderVisible"
+            v-if="!loading"
             :visible="visible"
             title="Are you sure?"
             message="Are you sure you would like to remove this item from the shopping cart?"
@@ -63,12 +63,6 @@
           </SfNotification>
         </div>
       </transition>
-      <SfLoader
-        v-if="isLoaderVisible"
-        :loading="isLoaderVisible"
-      >
-        <div />
-      </SfLoader>
       <template #content-top>
         <SfProperty
           v-if="totalItems"
@@ -77,115 +71,117 @@
           :value="totalItems"
         />
       </template>
-      <transition
-        name="sf-fade"
-        mode="out-in"
-      >
-        <div
-          v-if="totalItems"
-          key="my-cart"
-          class="my-cart"
+      <SfLoader :loading="loading">
+        <transition
+          name="sf-fade"
+          mode="out-in"
         >
-          <div class="collected-product-list">
-            <transition-group
-              name="sf-fade"
-              tag="div"
-            >
-              <SfCollectedProduct
-                v-for="product in products"
-                :key="cartGetters.getItemSku(product)"
-                :image="cartGetters.getItemImage(product)"
-                :title="cartGetters.getItemName(product)"
-                :regular-price="
-                  $fc(cartGetters.getItemPrice(product).regular)
-                "
-                :special-price="
-                  cartGetters.productHasSpecialPrice(product)
-                    ? getItemPrice(product).special &&
-                      $fc(cartGetters.getItemPrice(product).special)
-                    : ''
-                "
-                :link="
-                  localePath(
-                    `/p/${cartGetters.getItemSku(product)}${cartGetters.getSlug(
-                      product
-                    )}`
-                  )
-                "
-                class="collected-product"
-                @input="delayedUpdateItemQty({ product, quantity: $event })"
-                @click:remove="sendToRemove({ product })"
+          <div
+            v-if="totalItems"
+            key="my-cart"
+            class="my-cart"
+          >
+            <div class="collected-product-list">
+              <transition-group
+                name="sf-fade"
+                tag="div"
               >
-                <template #input>
-                  <div
-                    v-if="isInStock(product)"
-                    class="sf-collected-product__quantity-wrapper"
-                  >
-                    <SfQuantitySelector
-                      :disabled="loading"
-                      :qty="cartGetters.getItemQty(product)"
-                      class="sf-collected-product__quantity-selector"
-                      @input="delayedUpdateItemQty({ product, quantity: $event })"
-                    />
-                  </div>
-                  <SfBadge
-                    v-else
-                    class="color-danger sf-badge__absolute"
-                  >
-                    <template #default>
-                      <span>{{ $t('Out of stock') }}</span>
-                    </template>
-                  </SfBadge>
-                </template>
-                <template #configuration>
-                  <div v-if="getAttributes(product).length > 0">
-                    <SfProperty
-                      v-for="(attr, index) in getAttributes(product)"
-                      :key="index"
-                      :name="attr.option_label"
-                      :value="attr.value_label"
-                    />
-                  </div>
-                  <div v-if="getBundles(product).length > 0">
-                    <SfProperty
-                      v-for="(bundle, i) in getBundles(product)"
-                      :key="i"
-                      :name="`${bundle.quantity}x`"
-                      :value="bundle.label"
-                    />
-                  </div>
-                  <div v-else />
-                </template>
-              </SfCollectedProduct>
-            </transition-group>
+                <SfCollectedProduct
+                  v-for="product in products"
+                  :key="cartGetters.getItemSku(product)"
+                  :image="cartGetters.getItemImage(product)"
+                  :title="cartGetters.getItemName(product)"
+                  :regular-price="
+                    $fc(cartGetters.getItemPrice(product).regular)
+                  "
+                  :special-price="
+                    cartGetters.productHasSpecialPrice(product)
+                      ? getItemPrice(product).special &&
+                        $fc(cartGetters.getItemPrice(product).special)
+                      : ''
+                  "
+                  :link="
+                    localePath(
+                      `/p/${cartGetters.getItemSku(product)}${cartGetters.getSlug(
+                        product
+                      )}`
+                    )
+                  "
+                  class="collected-product"
+                  @input="delayedUpdateItemQty({ product, quantity: $event })"
+                  @click:remove="sendToRemove({ product })"
+                >
+                  <template #input>
+                    <div
+                      v-if="isInStock(product)"
+                      class="sf-collected-product__quantity-wrapper"
+                    >
+                      <SfQuantitySelector
+                        :disabled="loading"
+                        :qty="cartGetters.getItemQty(product)"
+                        class="sf-collected-product__quantity-selector"
+                        @input="delayedUpdateItemQty({ product, quantity: $event })"
+                      />
+                    </div>
+                    <SfBadge
+                      v-else
+                      class="color-danger sf-badge__absolute"
+                    >
+                      <template #default>
+                        <span>{{ $t('Out of stock') }}</span>
+                      </template>
+                    </SfBadge>
+                  </template>
+                  <template #configuration>
+                    <div v-if="getAttributes(product).length > 0">
+                      <SfProperty
+                        v-for="(attr, index) in getAttributes(product)"
+                        :key="index"
+                        :name="attr.option_label"
+                        :value="attr.value_label"
+                      />
+                    </div>
+                    <div v-if="getBundles(product).length > 0">
+                      <SfProperty
+                        v-for="(bundle, i) in getBundles(product)"
+                        :key="i"
+                        :name="`${bundle.quantity}x`"
+                        :value="bundle.label"
+                      />
+                    </div>
+                    <div v-else />
+                  </template>
+                </SfCollectedProduct>
+              </transition-group>
+            </div>
           </div>
-        </div>
-        <div
-          v-else
-          key="empty-cart"
-          class="empty-cart"
-        >
-          <div class="empty-cart__banner">
-            <nuxt-img
-              alt="Empty bag"
-              class="empty-cart__image"
-              src="/icons/empty-cart.svg"
-              width="211"
-              height="143"
-            />
-            <SfHeading
-              title="Your cart is empty"
-              :level="2"
-              class="empty-cart__heading"
-              :description="
-                $t(
-                  'Looks like you haven’t added any items to the bag yet. Start shopping to fill it in.'
-                )
-              "
-            />
+          <div
+            v-else
+            key="empty-cart"
+            class="empty-cart"
+          >
+            <div class="empty-cart__banner">
+              <nuxt-img
+                alt="Empty bag"
+                class="empty-cart__image"
+                src="/icons/empty-cart.svg"
+                width="211"
+                height="143"
+              />
+              <SfHeading
+                title="Your cart is empty"
+                :level="2"
+                class="empty-cart__heading"
+                :description="
+                  $t(
+                    'Looks like you haven’t added any items to the bag yet. Start shopping to fill it in.'
+                  )
+                "
+              />
+            </div>
           </div>
-        </div>
-      </transition>
+        </transition>
+      </SfLoader>
       <template #content-bottom>
         <transition name="sf-fade">
           <div v-if="totalItems">
@@ -290,6 +286,7 @@ export default defineComponent({
       load: loadCart,
       loading,
     } = useCart();
+
     const { isAuthenticated } = useUser();
     const { send: sendNotification, notifications } = useUiNotification();
 
@@ -302,7 +299,6 @@ export default defineComponent({
     const getAttributes = (product) => product.configurable_options || [];
     const getBundles = (product) => product.bundle_options?.map((b) => b.values).flat() || [];
     const visible = ref(false);
-    const isLoaderVisible = ref(false);
     const tempProduct = ref();
 
     onMounted(() => {
@@ -325,11 +321,7 @@ export default defineComponent({
     };
 
     const actionRemoveItem = async (product) => {
-      isLoaderVisible.value = true;
-
       await removeItem({ product });
-
-      isLoaderVisible.value = false;
       visible.value = false;
 
       sendNotification({
@@ -349,7 +341,7 @@ export default defineComponent({
     return {
       sendToRemove,
       actionRemoveItem,
-      loading: computed(() => (!!loading.value)),
+      loading,
       isAuthenticated,
       products,
       removeItem,
@@ -357,7 +349,6 @@ export default defineComponent({
       isCartSidebarOpen,
       notifications,
       visible,
-      isLoaderVisible,
       tempProduct,
       toggleCartSidebar,
       goToCheckout,
diff --git a/packages/theme/layouts/default.vue b/packages/theme/layouts/default.vue
index 1e67481bf..a73c5b688 100644
--- a/packages/theme/layouts/default.vue
+++ b/packages/theme/layouts/default.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <LazyHydrate when-visible>
-      <CartSidebar />
-    </LazyHydrate>
+    <CartSidebar v-if="isCartSidebarOpen" />
     <LazyHydrate when-visible>
       <WishlistSidebar />
     </LazyHydrate>
@@ -28,6 +26,8 @@ import { useRoute, defineComponent, onMounted } from '@nuxtjs/composition-api';
 import {
   useUser,
 } from '@vue-storefront/magento';
+import useUiState from '~/composables/useUiState.ts';
+
 import { useMagentoConfiguration } from '~/composables/useMagentoConfiguration';
 import AppHeader from '~/components/AppHeader.vue';
 import BottomNavigation from '~/components/BottomNavigation.vue';
@@ -52,6 +52,7 @@ export default defineComponent({
     const route = useRoute();
     const { load: loadUser } = useUser();
     const { loadConfiguration } = useMagentoConfiguration();
+    const { isCartSidebarOpen } = useUiState();
 
     onMounted(() => {
       loadConfiguration();
@@ -59,6 +60,7 @@ export default defineComponent({
     });
 
     return {
+      isCartSidebarOpen,
       route,
     };
   },
diff --git a/packages/theme/test-utils/mocks/useCart.js b/packages/theme/test-utils/mocks/useCart.js
index 5d329f040..0eb6fb53e 100644
--- a/packages/theme/test-utils/mocks/useCart.js
+++ b/packages/theme/test-utils/mocks/useCart.js
@@ -1,8 +1,6 @@
 export const useEmptyCartMock = (cartData = {}) => ({
   load: jest.fn(),
-  loading: {
-    value: false,
-  },
+  loading: false,
   removeItem: jest.fn(),
   updateItemQty: jest.fn(),
   cart: {
@@ -13,9 +11,7 @@ export const useEmptyCartMock = (cartData = {}) => ({
 
 export const useCartMock = (cartData = {}) => ({
   load: jest.fn(),
-  loading: {
-    value: false,
-  },
+  loading: false,
   removeItem: jest.fn(),
   updateItemQty: jest.fn(),
   cart: {