Implementing the loading behaviour

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+- Implemented loading behaviour for products comparison page.
+
 ### Changed
 - Limit comparison bucket size and given it as app configuration parameter
 - Enhance product comparison context to add array of items at once 

react/ComparisonPage.tsx

@@ -1,16 +1,16 @@
-import React, { ReactChildren, ReactChild } from 'react'
-import { pathOr, isEmpty } from 'ramda'
+import React, { ReactChild, ReactChildren } from 'react'
+import { isEmpty, pathOr } from 'ramda'
 import { useCssHandles } from 'vtex.css-handles'
 import {
+ Button,
  Layout,
- PageHeader,
  PageBlock,
- Button,
+ PageHeader,
+ Spinner,
  withToast,
- // Dropdown,
 } from 'vtex.styleguide'
 import ComparisonContext from './ProductComparisonContext'
-import { InjectedIntlProps, injectIntl, defineMessages } from 'react-intl'
+import { defineMessages, InjectedIntlProps, injectIntl } from 'react-intl'
 import './global.css'
 
 const CSS_HANDLES = ['pageContainer', 'sortBy', 'removeAllItemsButtonWrapper']
@@ -80,7 +80,9 @@ const ComparisonPage = ({ children, intl, showToast }: Props) => {
  }
 
  return isEmpty(comparisonProducts) ? (
- <div />
+ <div className={'mw3 center'}>
+ <Spinner />
+ </div>
  ) : (
  <div className={`${cssHandles.pageContainer} mw9 center`}>
  <Layout

react/global.css

@@ -9,3 +9,23 @@
  padding: unset;
  border: unset;
 }
+
+@-webkit-keyframes spin {
+ 0% { -webkit-transform: rotate(0deg); }
+ 100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+.productLoader {
+ border: 16px solid #f3f3f3;
+ border-radius: 50%;
+ border-top: 16px solid #3498db;
+ width: 120px;
+ height: 120px;
+ -webkit-animation: spin 2s linear infinite; /* Safari */
+ animation: spin 2s linear infinite;
+}

react/typings/vtex.styleguide.d.ts

@@ -10,6 +10,7 @@ declare module 'vtex.styleguide' {
  export const PageHeader: ComponentType<InputProps>
  export const PageBlock: ComponentType<InputProps>
  export const ToastProvider: ComponentType<InputProps>
+ export const Spinner: ComponentType<InputProps>
  export const ToastConsumer: ComponentType<InputProps>
  export const Dropdown: ComponentType<InputProps>
  export const withToast