feat: improve primary color load performance

Author: jrgarciadev

src/components/Customizer/index.js

@@ -1,14 +1,14 @@
 import { useState, useRef, useCallback } from 'react';
 import { Setting, CloseSquare } from 'react-iconly';
-import { useOnClickOutside, useBodyScroll } from '@hooks';
+import { useOnClickOutside, useBodyScroll, useChangeRootColor } from '@hooks';
 import { useForm } from 'react-hook-form';
 import { Input, Switch } from '@components';
 import { isEmpty } from 'lodash';
 import { useToasts } from '@contexts/toasts';
 import { useUserDataContext } from '@contexts/user-data';
-import { useCustomizerContext } from '@contexts/customizer';
 import rules from '@common/rules';
 import { upsertUser } from '@services/user';
+
 import ColorPicker from './color-picker';
 import { CustomizerContainer, CustomizerToggle } from './styles';
 
@@ -19,8 +19,7 @@ const Customizer = () => {
   const [, setBodyHidden] = useBodyScroll(null, { scrollLayer: true });
   const { ToastsType, addToastWithTimeout } = useToasts();
   const { user, updateValue: updateUserData } = useUserDataContext();
-  const { primaryColor, updateValue } = useCustomizerContext();
-  const [localColor, setLocalColor] = useState(() => primaryColor);
+  const [localColor, setLocalColor] = useState(user.primaryColor);
 
   const { register, handleSubmit, formState, errors } = useForm({
     mode: 'onBlur',
@@ -50,7 +49,7 @@ const Customizer = () => {
     (color) => {
       setLocalColor(color);
       setTimeout(() => {
-        updateValue({ primaryColor: color });
+        useChangeRootColor(color);
       }, 100);
     },
     [localColor],

src/components/Toasts/styles.js

@@ -63,8 +63,9 @@ export const ErrorToast = styled(Toast)`
 `;
 
 export const SuccessToast = styled(Toast)`
-  background-color: ${prop('theme.brand.success')};
-  color: ${prop('theme.genericColors.black')};
+  background-color: ${prop('theme.brand.primary')};
+  color: ${prop('theme.genericColors.white')};
+  box-shadow: ${prop('theme.shadows.small')};
 `;
 
 export const NeutralToast = styled(Toast)`

src/hooks/index.js

@@ -3,4 +3,5 @@ export { default as useScrollDirection } from './use-scroll-direction';
 export { default as useNearScreen } from './use-near-screen';
 export { useInputValue } from './use-input-value';
 export { useBodyScroll } from './use-body-scroll';
+export { useChangeRootColor } from './use-change-root-color';
 export { useMediaQuery, useIsMobile } from './use-media-query';

src/hooks/use-change-root-color.js

@@ -0,0 +1,6 @@
+export const useChangeRootColor = (color, rootColor = 'primary') => {
+  if (typeof document !== 'undefined' && color) {
+    const root = document.documentElement;
+    root.style.setProperty(`--colors-${rootColor}`, color);
+  }
+};

src/layouts/portfolio.js

@@ -3,11 +3,8 @@ import { useEffect } from 'react';
 import { Toasts } from '@components';
 import { withRouter } from 'next/router';
 import dynamic from 'next/dynamic';
-import { ThemeProvider } from 'styled-components';
-import theme from '@themes/dark';
 import { IS_GENERATOR } from '@lib/constants';
 import { useUIContext } from '@contexts/ui';
-import { useCustomizerContext } from '@contexts/customizer';
 import { useUserDataContext } from '@contexts/user-data';
 import { isEmpty } from 'lodash';
 import { SkipToContentLink } from './styles';
@@ -23,18 +20,8 @@ const PorfolioLayout = ({ children, router }) => {
   const isBrowser = typeof window !== `undefined`;
   const isHome = router.pathname === '/';
   const { showNavbar, showDeployButton, mainFullHeight, showCustomizer } = useUIContext();
-  const { primaryColor, updateValue } = useCustomizerContext();
   const { user } = useUserDataContext();
 
-  const primary = user.primaryColor ? user.primaryColor : primaryColor;
-  const customTheme = { ...theme, brand: { ...theme.brand, primary } };
-
-  if (primary !== primaryColor) {
-    updateValue({ primaryColor: primary });
-  } else if (primary === 'transparent') {
-    updateValue({ primaryColor: '#1ee0e0' });
-  }
-
   useEffect(() => {
     if (!isBrowser) {
       return;
@@ -55,19 +42,17 @@ const PorfolioLayout = ({ children, router }) => {
   }, []);
 
   return (
-    <ThemeProvider theme={customTheme}>
-      <BaseLayout isPortfolio>
-        <SkipToContentLink href="#content">Skip to Content</SkipToContentLink>
-        {showNavbar && <Navbar isHome={isHome} />}
-        <Main id="content" fullHeight={mainFullHeight} className="fillHeight">
-          {children}
-        </Main>
-        {IS_GENERATOR && showDeployButton && <VercelButton />}
-        {IS_GENERATOR && showCustomizer && <Customizer />}
-        {IS_GENERATOR && <Toasts />}
-        <Footer simple={isEmpty(user.username)} user={user} />
-      </BaseLayout>
-    </ThemeProvider>
+    <BaseLayout isPortfolio>
+      <SkipToContentLink href="#content">Skip to Content</SkipToContentLink>
+      {showNavbar && <Navbar isHome={isHome} />}
+      <Main id="content" fullHeight={mainFullHeight} className="fillHeight">
+        {children}
+      </Main>
+      {IS_GENERATOR && showDeployButton && <VercelButton />}
+      {IS_GENERATOR && showCustomizer && <Customizer />}
+      {IS_GENERATOR && <Toasts />}
+      <Footer simple={isEmpty(user.username)} user={user} />
+    </BaseLayout>
   );
 };
 

src/pages/_app.js

@@ -5,26 +5,30 @@ import GlobalStyles from '@styles/globals';
 import * as gtag from '@lib/gtag';
 import UserDataContext from '@contexts/user-data';
 import UIContext from '@contexts/ui';
+import theme from '@themes/dark';
 import CustomizerContext from '@contexts/customizer';
 import ToastsContext from '@contexts/toasts';
 import 'react-tippy/dist/tippy.css';
+import { ThemeProvider } from 'styled-components';
 // Notice how we track pageview when route is changed
 Router.events.on('routeChangeComplete', (url) => gtag.pageview(url));
 
 export default function App({ Component, pageProps }) {
   const Layout = Component.Layout || PortfolioLayout;
   return (
-    <CustomizerContext.Provider>
-      <UserDataContext.Provider>
-        <ToastsContext.Provider>
-          <UIContext.Provider>
-            <Layout>
-              <GlobalStyles />
-              <Component {...pageProps} />
-            </Layout>
-          </UIContext.Provider>
-        </ToastsContext.Provider>
-      </UserDataContext.Provider>
-    </CustomizerContext.Provider>
+    <ThemeProvider theme={theme}>
+      <CustomizerContext.Provider>
+        <UserDataContext.Provider>
+          <ToastsContext.Provider>
+            <UIContext.Provider>
+              <Layout>
+                <GlobalStyles />
+                <Component {...pageProps} />
+              </Layout>
+            </UIContext.Provider>
+          </ToastsContext.Provider>
+        </UserDataContext.Provider>
+      </CustomizerContext.Provider>
+    </ThemeProvider>
   );
 }

src/pages/index.js

@@ -3,6 +3,7 @@ import { StyledMainContainer } from '@common/styles';
 import PortfolioLayout from '@layouts/portfolio';
 import HomeLayout from '@layouts/home';
 import buildUser from '@lib/user-builder';
+import { useChangeRootColor } from '@hooks';
 import { isEnabledUser } from '@utils/user-mapping';
 import { IS_PORTFOLIO } from '@lib/constants';
 import PropTypes from 'prop-types';
@@ -30,6 +31,7 @@ const IndexPage = ({ user }) => {
     if (!isEnabledUser(user)) {
       return <UserNotFoundView username={user?.username} />;
     }
+    useChangeRootColor(user.primaryColor);
     return <PortfolioView user={user} />;
   }
   return (

src/pages/portfolio/[username].js

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { UserNotFoundView, PortfolioView } from '@views';
 import { withRouter } from 'next/router';
 import PropTypes from 'prop-types';
+import { useChangeRootColor } from '@hooks';
 import { LoaderContainer, Loader } from '@common/styles';
 import buildUser from '@lib/user-builder';
 import { isEnabledUser } from '@utils/user-mapping';
@@ -51,6 +52,7 @@ const PortfolioPage = ({ router, user }) => {
   if (!router.isFallback && !isEnabledUser(user)) {
     return <UserNotFoundView username={user?.username} />;
   }
+  useChangeRootColor(user.primaryColor);
   return <PortfolioView user={user} />;
 };
 

src/pages/preview/[username].js

@@ -5,6 +5,7 @@ import { LoaderContainer, Loader } from '@common/styles';
 import buildUser from '@lib/user-builder';
 import { isEnabledUser } from '@utils/user-mapping';
 import { IS_PORTFOLIO } from '@lib/constants';
+import { useChangeRootColor } from '@hooks';
 
 export async function getStaticPaths() {
   return { paths: [], fallback: true };
@@ -40,6 +41,7 @@ const PreviewPage = ({ router, user }) => {
   if (!router.isFallback && !isEnabledUser(user)) {
     return <UserNotFoundView username={user?.username} />;
   }
+  useChangeRootColor(user.primaryColor);
   return <PortfolioView isPreview user={user} />;
 };
 

src/styles/globals.js

@@ -7,6 +7,9 @@ export default createGlobalStyle`
   1.  Base styles
   -------------------------------------------------------------------------------
   */
+  :root {
+    --colors-primary: #1ee0e0;
+  }
   * {
     border: 0;
     box-sizing: inherit;

src/themes/common.js

@@ -14,7 +14,7 @@ export default {
     lg: '3rem',
   },
   brand: {
-    primary: '#1ee0e0',
+    primary: 'var(--colors-primary)',
     success: '#79FFE1',
     danger: '#ff4d4f',
     warning: '#F5A623',