diff --git a/CHANGELOG.md b/CHANGELOG.md index 3aec35138..be8116ecb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Security +## [0.1.1] - 2022-02-07 + +### Added + +- Feat: Style IconButton (#290) + +### Changed + +- Chore: tweaks search page (#293) +- Extract UISelect from Sort to its own component (#299) +- Feat: lazy loading and improvements (CLS) (#300) + +### Fixed + +- SonarQube warning (#297) +- General fixes on Beta component (#287) +- Fix/Adjust inappropriate rerenders (#304) + ## [0.1.0] - 2022-02-01 Version released for the Closed Beta diff --git a/README.md b/README.md index 9c05c6cc2..cd01c8174 100644 --- a/README.md +++ b/README.md @@ -412,6 +412,16 @@ Looking for more guidance? Full documentation for Faststore lives [on this GitHu This project has strict performance budgets. Right out of the box, this project performs around 95 on Google's Page Speed Insights website, which usually is way more strict than your laptop's chrome lighthouse. Every time you commit to the repository, our QA bots will run and evaluate your code quality. We recommend you NEVER put in production a code that breaks any of the bots. If a bot breaks and still you need to put the code into production, change the bot config (`lighthouserc.js`, `cypress.json`) to make it pass and merge. This way you ensure your website will keep performing well during the years to come. +### Lazy loading components + +[According to Gatsby](https://www.gatsbyjs.com/docs/how-to/performance/improving-site-performance/#step-5-on-critical-paths-lazy-load-below-the-fold-components): + +> `loadable-components` is the recommended lazy-loading solution for all server-side-rendered React applications, including Gatsby websites. + +So First, try to use the native `lazy`/`Suspense` alternative. But if there is some Server Side Rendered dependency, switch to using the `loadable-components`. + +Finally, for that pages that can use both `lazy` and `loadable`, keep the preference to use only `loadable` for the sake of avoiding loading two different things for the same purpose. + ## Adding third party scripts Adding third-party scripts to a webpage usually makes it slow. To maintain great performance while third-party scripts are added, this project uses [Partytown](https://github.com/BuilderIO/partytown/), a lazy-load library that helps relocate intensive scripts into a web worker and off of the main thread. diff --git a/cypress/integration/plp.test.js b/cypress/integration/plp.test.js index 6a9105131..c0cc9af07 100644 --- a/cypress/integration/plp.test.js +++ b/cypress/integration/plp.test.js @@ -28,28 +28,30 @@ describe('Search page Filters and Sorting options', () => { .should('exist') .first() .click() - .getById('filter-modal-button-apply') - .click() - - // Check applied filters - cy.getById('open-filter-button') - .click() - .getById('filter-accordion-panel-checkbox') - .first() - .click({ force: true }) .then(($checkbox) => { const value = $checkbox.attr('data-value') const quantity = $checkbox.attr('data-quantity') - // Check if the filter applied actually ended up in the URL - cy.location('href').should((loc) => { - expect(loc).to.include(value) - }) - - // Check if the filter applied actually brought the number of products it said it would - cy.getById('total-product-count').then(($countDiv) => { - expect(Number($countDiv.attr('data-count'))).to.eq(Number(quantity)) - }) + cy.getById('filter-modal-button-apply') + .click() + .then(() => { + // Check if the filter applied actually ended up in the URL + cy.location('href').should((loc) => { + expect(loc).to.include(value) + }) + + // Check if the filter applied actually brought the number of products it said it would + + cy.waitUntil(() => { + return cy.get('.product-grid').should('exist') + }).then(() => { + cy.getById('total-product-count').then(($countDiv) => { + expect(Number($countDiv.attr('data-count'))).to.eq( + Number(quantity) + ) + }) + }) + }) }) }) diff --git a/gatsby-config.js b/gatsby-config.js index ab8e05be1..b9682aa85 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -42,7 +42,7 @@ module.exports = { start_url: '/', icon: 'src/images/icon.png', background_color: '#E31C58', - theme_color: '#E31C58', + theme_color: '#ffffff', display: 'standalone', cache_busting_mode: 'none', }, diff --git a/src/Layout.tsx b/src/Layout.tsx index b3703400b..50cd6c188 100644 --- a/src/Layout.tsx +++ b/src/Layout.tsx @@ -1,5 +1,5 @@ -import React, { lazy, Suspense, useState } from 'react' -import Loadable from '@loadable/component' +import React, { useState } from 'react' +import loadable from '@loadable/component' import Navbar from 'src/components/common/Navbar' import { BellRinging as BellRingingIcon } from 'phosphor-react' import { useCartNotificationEffect } from 'src/sdk/cart/useCartNotificationEffect' @@ -9,9 +9,11 @@ import type { PropsWithChildren } from 'react' import Alert from './components/ui/Alert' import './styles/fonts.css' -const CartSidebar = lazy(() => import('src/components/cart/CartSidebar')) -const Toast = lazy(() => import('src/components/ui/Toast')) -const Footer = Loadable(() => import('src/components/common/Footer')) +const CartSidebar = loadable(() => import('src/components/cart/CartSidebar')) + +const Toast = loadable(() => import('src/components/ui/Toast')) + +const Footer = loadable(() => import('src/components/common/Footer')) function Layout({ children }: PropsWithChildren) { const { displayMinicart, toasts } = useUI() @@ -51,17 +53,9 @@ function Layout({ children }: PropsWithChildren) {
{children}