fix(app): dark mode page flash in app router

Nearblocks · Nov 5, 2024 · 50218a2 · 50218a2
1 parent 637daaa
commit 50218a2
Show file tree

Hide file tree

Showing 20 changed files with 63 additions and 100 deletions.
diff --git a/apps/app/package.json b/apps/app/package.json
@@ -58,6 +58,7 @@
     "clipboard": "^2.0.11",
     "dayjs": "1.11.13",
     "ethers": "^5.7.2",
+    "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "near-api-js": "5.0.0",
     "near-social-vm": "github:NearSocial/VM#2.5.5",
@@ -91,6 +92,7 @@
   },
   "devDependencies": {
     "@types/big.js": "~6.2.2",
+    "@types/js-cookie": "^3.0.6",
     "@types/lodash": "~4.17.7",
     "@types/node": "~20.8",
     "@types/qs": "~6.9.15",

diff --git a/apps/app/src/components/app/Address/Contract/VerifiedData.tsx b/apps/app/src/components/app/Address/Contract/VerifiedData.tsx
@@ -12,7 +12,7 @@ import { VerifierData } from '@/utils/types';
 import ErrorMessage from '@/components/common/ErrorMessage';
 import FaInbox from '@/components/Icons/FaInbox';
 import { verifierConfig } from '@/utils/app/config';
-import { useThemeStore } from '@/stores/theme';
+import Cookies from 'js-cookie';
 
 type VerifiedDataProps = {
   verifierData: VerifierData;
@@ -49,7 +49,7 @@ const VerifiedData: React.FC<VerifiedDataProps> = ({
     {},
   );
 
-  const theme = useThemeStore((store) => store.theme);
+  const theme = Cookies?.get('theme') || 'light';
 
   useEffect(() => {
     const fetchCode = async () => {

diff --git a/apps/app/src/components/app/Advertise/ThemeImage.tsx b/apps/app/src/components/app/Advertise/ThemeImage.tsx
@@ -1,9 +1,9 @@
 'use client';
-import { useThemeStore } from '@/stores/theme';
+import Cookies from 'js-cookie';
 import Image from 'next/legacy/image';
 
 export default function ThemeImage() {
-  const theme = useThemeStore((store) => store.theme);
+  const theme = Cookies?.get('theme') || 'light';
 
   return (
     <Image

diff --git a/apps/app/src/components/app/Apis/ApiActions.tsx b/apps/app/src/components/app/Apis/ApiActions.tsx
@@ -11,7 +11,7 @@ import { useState } from 'react';
 import Skeleton from '../skeleton/common/Skeleton';
 import { toast } from 'react-toastify';
 import LoadingCircular from '@/components/common/LoadingCircular';
-import { useThemeStore } from '@/stores/theme';
+import Cookies from 'js-cookie';
 
 const ApiActions = ({
   status,
@@ -22,7 +22,7 @@ const ApiActions = ({
   planDetails: any;
   getContactDetails: any;
 }) => {
-  const theme = useThemeStore((store) => store.theme);
+  const theme = Cookies?.get('theme') || 'light';
   const [interval, setInterval] = useState(true);
 
   const [subject, _setSubject] = useState('API');

diff --git a/apps/app/src/components/app/Charts/Chart.tsx b/apps/app/src/components/app/Charts/Chart.tsx
@@ -10,7 +10,7 @@ import Image from 'next/legacy/image';
 import { useTranslations } from 'next-intl';
 import { Link } from '@/i18n/routing';
 import { useConfig } from '@/hooks/app/useConfig';
-import { useThemeStore } from '@/stores/theme';
+import Cookies from 'js-cookie';
 
 interface Props {
   chartTypes?: string;
@@ -24,7 +24,7 @@ interface Props {
 const Chart = (props: Props) => {
   const { chartTypes, poweredBy, chartsData } = props;
   const t = useTranslations();
-  const theme = useThemeStore((store) => store.theme);
+  const theme = Cookies?.get('theme') || 'light';
   const [chartConfig, setChartConfig] = useState<ChartConfig | null>(null);
   const [chartInfo, setChartInfo] = useState<ChartTypeInfo>({
     title: '',

diff --git a/apps/app/src/components/app/Charts/TpsChart.tsx b/apps/app/src/components/app/Charts/TpsChart.tsx
@@ -9,7 +9,7 @@ import Skeleton from '../skeleton/common/Skeleton';
 import { useTranslations } from 'next-intl';
 import { Link } from '@/i18n/routing';
 import { useConfig } from '@/hooks/app/useConfig';
-import { useThemeStore } from '@/stores/theme';
+import Cookies from 'js-cookie';
 
 interface Props {
   chartTypes: string;
@@ -21,7 +21,7 @@ interface Props {
 }
 const TpsChart = (props: Props) => {
   const { chartTypes, poweredBy, data } = props;
-  const theme = useThemeStore((store) => store.theme);
+  const theme = Cookies?.get('theme') || 'light';
   const t = useTranslations();
   const { networkId } = useConfig();
 

diff --git a/apps/app/src/components/app/Contact/FormContact.tsx b/apps/app/src/components/app/Contact/FormContact.tsx
@@ -7,7 +7,7 @@ import { Turnstile } from '@marsidev/react-turnstile';
 import type { TurnstileInstance } from '@marsidev/react-turnstile';
 import { useTranslations } from 'next-intl';
 import LoadingCircular from '@/components/common/LoadingCircular';
-import { useThemeStore } from '@/stores/theme';
+import Cookies from 'js-cookie';
 import { useConfig } from '@/hooks/app/useConfig';
 
 interface Props {
@@ -16,7 +16,7 @@ interface Props {
 }
 
 const FormContact = ({ selectValue, getContactDetails }: Props) => {
-  const theme = useThemeStore((store) => store.theme);
+  const theme = Cookies?.get('theme') || 'light';
   const t = useTranslations('contact');
   const { siteKey } = useConfig();
   const [loading, setLoading] = useState(false);

diff --git a/apps/app/src/components/app/Layouts/Footer.tsx b/apps/app/src/components/app/Layouts/Footer.tsx
@@ -3,10 +3,8 @@ import Image from 'next/legacy/image';
 import Arrow from '../Icons/Arrow';
 import { useTranslations } from 'next-intl';
 import { Link } from '@/i18n/routing';
-import { useThemeStore } from '@/stores/theme';
 
-const Footer = () => {
-  const theme = useThemeStore((store) => store.theme);
+const Footer = ({ theme }: any) => {
   const currentDate = new Date();
   const t = useTranslations();
 

diff --git a/apps/app/src/components/app/Layouts/Header.tsx b/apps/app/src/components/app/Layouts/Header.tsx
@@ -15,7 +15,8 @@ import { Link, routing, usePathname } from '@/i18n/routing';
 import { useTranslations } from 'next-intl';
 import Search from '../common/Search';
 import { useConfig } from '@/hooks/app/useConfig';
-import { useThemeStore } from '@/stores/theme';
+import Cookies from 'js-cookie';
+import { setTheme } from '@/utils/app/actions';
 
 const menus = [
   {
@@ -149,10 +150,10 @@ const Header = ({
   stats: statsDetails,
   block: latestBlocks,
   handleFilterAndKeyword,
+  theme,
 }: any) => {
   const stats: Stats | undefined = statsDetails?.stats?.[0];
   const block: BlocksInfo | undefined = latestBlocks?.blocks?.[0];
-
   const [open, setOpen] = useState<boolean>(false);
   const requestSignInWithWallet = useAuthStore(
     (store) => store.requestSignInWithWallet,
@@ -165,7 +166,6 @@ const Header = ({
   const t = useTranslations();
   const { networkId } = useConfig();
   const pathname = usePathname();
-  const theme = useThemeStore((store) => store.theme);
 
   const status = useMemo(() => {
     if (block?.block_timestamp) {
@@ -181,12 +181,6 @@ const Header = ({
     return true;
   }, [block]);
 
-  const toggleTheme = () => {
-    localStorage.setItem('theme', theme === 'light' ? 'dark' : 'light');
-    document.documentElement.classList.toggle('dark');
-    document.documentElement.classList.toggle('light');
-  };
-
   const showSearch = pathname !== '/';
   const userLoading = false;
 
@@ -201,6 +195,12 @@ const Header = ({
     className: any;
   };
 
+  const toggleTheme = () => {
+    const newTheme = theme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+    Cookies.set('theme', newTheme, { expires: 30 });
+  };
+
   const IntlLink: React.FC<LinkProps> = (props) => {
     if (!routing?.locales?.includes(props.locale)) {
       console.error(`Invalid locale: ${props.locale}`);

diff --git a/apps/app/src/components/app/Layouts/Layout.tsx b/apps/app/src/components/app/Layouts/Layout.tsx
@@ -8,6 +8,7 @@ import { Manrope } from 'next/font/google';
 import Script from 'next/script';
 import { PublicEnvProvider } from 'next-runtime-env';
 import { ToastContainer } from 'react-toastify';
+import { cookies } from 'next/headers';
 
 interface LayoutProps {
   children: ReactNode;
@@ -23,7 +24,7 @@ const manrope = Manrope({
 
 const Layout = async ({ children }: LayoutProps) => {
   const messages = await getMessages();
-
+  const theme = cookies().get('theme')?.value || 'light';
   const [stats, blocks] = await Promise.all([
     getRequest(`stats`),
     getRequest(`blocks/latest?limit=1`),
@@ -85,7 +86,7 @@ const Layout = async ({ children }: LayoutProps) => {
 
   return (
     <html
-      className={`${manrope.className} light`}
+      className={`${manrope.className} ${theme}`}
       suppressHydrationWarning
       lang="en"
     >
@@ -110,7 +111,7 @@ const Layout = async ({ children }: LayoutProps) => {
         <link rel="manifest" href="/site.webmanifest" />
         <Script src="/__ENV.js" />
       </head>
-      <body className="overflow-x-hidden dark:bg-black-300">
+      <body className={`overflow-x-hidden dark:bg-black-300`}>
         <noscript>
           <iframe
             src={`https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GTM_ID}`}
@@ -133,25 +134,14 @@ const Layout = async ({ children }: LayoutProps) => {
             })(window,document,'script','dataLayer','${process.env.NEXT_PUBLIC_GTM_ID}');
           `}
         </Script>
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `(function initTheme() {
-                var theme = localStorage.getItem('theme') || 'light'
-                if (theme === 'dark') {
-                  document.documentElement.classList.remove('light');
-                  document.documentElement.classList.add('dark');
-                }
-              })();`,
-          }}
-          id="theme-script"
-        />
         <PublicEnvProvider>
           <NextIntlClientProvider messages={messages}>
             <ToastContainer />
             <LayoutActions
               stats={stats}
               blocks={blocks}
               handleFilterAndKeyword={handleFilterAndKeyword}
+              theme={theme}
             >
               {children}
             </LayoutActions>

diff --git a/apps/app/src/components/app/Layouts/LayoutActions.tsx b/apps/app/src/components/app/Layouts/LayoutActions.tsx
@@ -4,15 +4,14 @@ import Header from './Header';
 import Footer from './Footer';
 import { ReactNode } from 'react';
 import NextTopLoader from 'nextjs-toploader';
-import { useThemeStore } from '@/stores/theme';
-import { useTheme } from '@/hooks/app/useTheme';
 
 interface LayoutProps {
   children: ReactNode;
   notice?: ReactNode;
   stats: any;
   blocks: any;
   handleFilterAndKeyword: any;
+  theme?: string;
 }
 
 const LayoutActions = ({
@@ -21,30 +20,29 @@ const LayoutActions = ({
   stats,
   notice,
   handleFilterAndKeyword,
+  theme,
 }: LayoutProps) => {
   const pathname = usePathname();
-  useTheme();
-  const theme = useThemeStore((store) => store.theme);
+
   const className =
     pathname === '/404'
       ? 'bg-white dark:bg-black-300'
       : 'bg-neargray-25 dark:bg-black-300	';
 
   return (
     <div className={className}>
-      <NextTopLoader
-        color={`${(theme as string) === 'dark' ? '#31766A' : '#0D494A'}`}
-      />
+      <NextTopLoader color={`${(theme as string) ? '#31766A' : '#0D494A'}`} />
       {notice}
       <header>
         <Header
           stats={stats}
           block={blocks}
           handleFilterAndKeyword={handleFilterAndKeyword}
+          theme={theme}
         />
       </header>
       <main>{children}</main>
-      <Footer />
+      <Footer theme={theme} />
     </div>
   );
 };

diff --git a/apps/app/src/components/app/NodeExplorer/Delegators.tsx b/apps/app/src/components/app/NodeExplorer/Delegators.tsx
@@ -13,10 +13,10 @@ import FaInbox from '../Icons/FaInbox';
 import { Link } from '@/i18n/routing';
 import { useSearchParams } from 'next/navigation';
 import { useConfig } from '@/hooks/app/useConfig';
-import { useThemeStore } from '@/stores/theme';
 import useRpc from '@/hooks/app/useRpc';
 import { useRpcProvider } from '@/hooks/app/useRpcProvider';
 import { useRpcStore } from '@/stores/app/rpc';
+import Cookies from 'js-cookie';
 
 interface Props {
   accountId: string;
@@ -34,7 +34,7 @@ const Delegators = ({ accountId }: Props) => {
   const { networkId } = useConfig();
   const searchParams = useSearchParams();
   const page = searchParams?.get('page');
-  const theme = useThemeStore((store) => store.theme);
+  const theme = Cookies?.get('theme') || 'light';
   const [error, setError] = useState(false);
   const [loading, setLoading] = useState(true);
   const [currentEpochInfo, setCurrentEpochInfo] =

diff --git a/apps/app/src/components/app/NodeExplorer/NodeListActions.tsx b/apps/app/src/components/app/NodeExplorer/NodeListActions.tsx
@@ -19,10 +19,10 @@ import Table from '../common/Table';
 import Big from 'big.js';
 import Image from 'next/image';
 import { Link } from '@/i18n/routing';
-import { useThemeStore } from '@/stores/theme';
+import Cookies from 'js-cookie';
 
 const NodeListActions = ({ data, totalSupply, latestBlock, error }: any) => {
-  const theme = useThemeStore((store) => store.theme);
+  const theme = Cookies?.get('theme') || 'light';
   const [page, setPage] = useState(1);
   const [totalCount, setTotalCount] = useState<number>(0);
   const [expanded, setExpanded] = useState<number[]>([]);

diff --git a/apps/app/src/components/app/Transactions/Overview.tsx b/apps/app/src/components/app/Transactions/Overview.tsx
@@ -14,7 +14,7 @@ import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import { Link } from '@/i18n/routing';
 import { useConfig } from '@/hooks/app/useConfig';
-import { useThemeStore } from '@/stores/theme';
+import Cookies from 'js-cookie';
 
 interface Props {
   stats: StatusInfo;
@@ -24,7 +24,7 @@ interface Props {
 
 const Overview = ({ stats, chartsDetails, error }: Props) => {
   const t = useTranslations();
-  const theme = useThemeStore((store) => store.theme);
+  const theme = Cookies?.get('theme') || 'light';
   const [mounted, setMounted] = useState(false);
   const [chartConfig, setChartConfig] = useState<ChartConfigType>(null);
   const { networkId } = useConfig();

diff --git a/apps/app/src/components/app/common/QrCode.tsx b/apps/app/src/components/app/common/QrCode.tsx
@@ -1,4 +1,4 @@
-import { useThemeStore } from '@/stores/theme';
+import Cookies from 'js-cookie';
 
 /**
  * @interface Props
@@ -14,7 +14,7 @@ interface Props {
 }
 
 const QrCode = (props: Props) => {
-  const theme = useThemeStore((store) => store.theme);
+  const theme = Cookies?.get('theme') || 'light';
 
   const colorDark = theme === 'dark' ? '#ffffff' : '#000000';
   const colorLight = theme === 'dark' ? '#000000' : '#ffffff';

diff --git a/apps/app/src/components/common/Links.tsx b/apps/app/src/components/common/Links.tsx
@@ -1,14 +1,14 @@
-import { useThemeStore } from '@/stores/theme';
 import { urlHostName } from '@/utils/libs';
 import { Tooltip } from '@reach/tooltip';
+import Cookies from 'js-cookie';
 import Image from 'next/legacy/image';
 
 const Links = (props: any) => {
   const { meta } = props;
   const twitter = urlHostName && urlHostName(meta?.twitter);
   const facebook = urlHostName && urlHostName(meta?.facebook);
   const telegram = urlHostName && urlHostName(meta?.telegram);
-  const theme = useThemeStore((store) => store.theme);
+  const theme = Cookies?.get('theme') || 'light';
 
   return (
     <div className="flex space-x-4">