Next release

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.

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)
+                )
+              })
+            })
+          })
       })
   })
 

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',
       },

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<unknown>) {
   const { displayMinicart, toasts } = useUI()
@@ -51,17 +53,9 @@ function Layout({ children }: PropsWithChildren<unknown>) {
       <main>{children}</main>
 
       <Footer />
-      {displayMinicart && (
-        <Suspense fallback={null}>
-          <CartSidebar />
-        </Suspense>
-      )}
+      {displayMinicart && <CartSidebar />}
 
-      {toasts.length > 0 && (
-        <Suspense fallback={null}>
-          <Toast />
-        </Suspense>
-      )}
+      {toasts.length > 0 && <Toast />}
     </div>
   )
 }

src/components/cart/CartSidebar/CartSidebar.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { useCart } from 'src/sdk/cart/useCart'
 import { useCheckoutButton } from 'src/sdk/cart/useCheckoutButton'
 import Button from 'src/components/ui/Button'
+import IconButton from 'src/components/ui/IconButton'
 import {
   ArrowRight as ArrowRightIcon,
   X as XIcon,
@@ -51,12 +52,13 @@ function CartSidebar() {
                   {totalItems}
                 </Badge>
               </div>
-              <Button
+              <IconButton
                 data-testid="cart-sidebar-button-close"
+                classes="cart-sidebar__button"
+                aria-label="Close Cart"
+                icon={<XIcon size={32} />}
                 onClick={() => onDismissTransition()}
-              >
-                <XIcon size={32} />
-              </Button>
+              />
             </header>
             <Alert icon={<TruckIcon size={24} />}>
               Free shiping starts at $300

src/components/cart/CartSidebar/cart-sidebar.scss

@@ -27,15 +27,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-5) var(--page-padding-phone) var(--space-4);
+  padding: var(--space-2) var(--page-padding-phone) var(--space-2);
   background-color: var(--bg-neutral-lightest);
 
-  button {
-    position: absolute;
-    right: calc(-1 * var(--page-padding-phone));
-    margin-right: var(--space-0);
-    color: var(--color-text);
-    background-color: transparent;
+  .cart-sidebar__button {
+    margin-right: calc(-1 * var(--space-1));
   }
 }
 

src/components/cart/CartToggle/CartToggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Button from 'src/components/ui/Button'
+import IconButton from 'src/components/ui/IconButton'
 import { useCartToggleButton } from 'src/sdk/cart/useCartToggleButton'
 import { ShoppingCart as ShoppingCartIcon } from 'phosphor-react'
 
@@ -9,13 +9,12 @@ function CartToggle() {
   const btnProps = useCartToggleButton()
 
   return (
-    <Button
+    <IconButton
       {...btnProps}
       className="cart-toggle"
       aria-label={`Cart with ${btnProps['data-items']} items`}
-    >
-      <ShoppingCartIcon size={32} />
-    </Button>
+      icon={<ShoppingCartIcon size={32} />}
+    />
   )
 }
 

src/components/cart/CartToggle/cart-toggle.scss

@@ -1,19 +1,7 @@
 @import "../../../styles/utilities.scss";
 
-.cart-toggle[data-store-button] {
+.cart-toggle[data-store-icon-button] {
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--tap-min-size);
-  min-height: var(--tap-min-size);
-  background-color: transparent;
-  border-width: 0;
-  border-radius: var(--border-radius-button);
-  cursor: pointer;
-  transition: background-color .5s ease;
-
-  svg { color: var(--color-text); }
 
   &::after {
     --cart-toggle-size: var(--space-3);
@@ -34,8 +22,4 @@
     border-radius: var(--border-radius-pill);
     content: attr(data-items);
   }
-
-  &:hover {
-    background-color: var(--bg-secondary-light);
-  }
 }

src/components/common/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import {
   List as UIList,
   Icon as UIIcon,
@@ -137,4 +137,4 @@ function Footer() {
   )
 }
 
-export default Footer
+export default memo(Footer)

src/components/common/Navbar/Navbar.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from 'react'
+import React, { memo, useState } from 'react'
 import { Link as LinkGatsby } from 'gatsby'
 import { List as UIList } from '@faststore/ui'
 import CartToggle from 'src/components/cart/CartToggle'
 import Logo from 'src/components/ui/Logo'
 import Link from 'src/components/ui/Link'
-import Button from 'src/components/ui/Button'
+import IconButton from 'src/components/ui/IconButton'
 import { List as ListIcon, X as XIcon } from 'phosphor-react'
 import SignInLink from 'src/components/ui/SignInLink'
 import SlideOver from 'src/components/ui/SlideOver'
@@ -50,13 +50,12 @@ function Navbar() {
     <header className="navbar / grid-content-full">
       <div className="navbar__header / grid-content">
         <section className="navbar__row">
-          <Button
-            className="navbar__menu"
+          <IconButton
+            classes="navbar__menu"
             aria-label="Open Menu"
+            icon={<ListIcon size={32} />}
             onClick={() => setShowMenu(true)}
-          >
-            <ListIcon size={32} />
-          </Button>
+          />
           <LinkGatsby
             to="/"
             aria-label="Go to Faststore home"
@@ -95,15 +94,15 @@ function Navbar() {
               >
                 <Logo />
               </LinkGatsby>
-              <Button
-                className="navbar__button"
+
+              <IconButton
+                classes="navbar__button"
                 aria-label="Close Menu"
+                icon={<XIcon size={32} />}
                 onClick={() => {
                   onDismissTransition?.()
                 }}
-              >
-                <XIcon size={32} />
-              </Button>
+              />
             </header>
             <div className="navlinks">
               <NavLinks />
@@ -118,4 +117,4 @@ function Navbar() {
   )
 }
 
-export default Navbar
+export default memo(Navbar)

src/components/common/Navbar/navbar.scss

@@ -31,10 +31,6 @@
 }
 
 .navbar__menu[data-store-button] {
-  color: var(--color-text);
-  background-color: transparent;
-  border: 0;
-
   @include media(">=notebook") { display: none; }
 }
 
@@ -87,17 +83,10 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-3) 0;
+  padding-bottom: var(--space-2);
 
   .navbar__button {
-    position: absolute;
-    right: calc(-1 * var(--page-padding-phone));
-    display: flex;
-    margin-right: var(--space-1);
-    padding: var(--space-1);
-    color: var(--color-text-display);
-    background-color: transparent;
-    border: 0;
+    margin-right: calc(-1 * var(--space-1));
   }
 }
 

src/components/common/SearchInput/search-input.scss

@@ -15,7 +15,12 @@
     border-radius: var(--border-radius-default);
     transition: box-shadow .2s ease, border .2s ease;
 
-    &:focus { @include input-focus-ring; }
+    &:hover {
+      border-color: var(--color-border-input-selected);
+      box-shadow: 0 0 0 var(--border-width-0) var(--color-border-input-selected);
+    }
+
+    @include input-focus-ring;
   }
 
   [data-store-icon] { display: block; }