chore: cleanup

package.json

@@ -26,12 +26,12 @@
     "lint:ls": "npx @ls-lint/ls-lint",
     "lint:next": "next lint",
     "lint:sass": "stylelint \"./src/**/*.scss\"",
+    "autofix:store": "prettier src/store --write && eslint src/store --fix",
     "adviser:dev": "adviser --tags dev --verbose",
     "adviser:ci": "adviser --tags ci --verbose --quiet",
     "generate": "plop",
     "preinstall": "npm i -g [email protected]",
     "prepare": "husky install && node scripts/prepare.js",
-    "autofix": "next lint --ignore-path .eslintignore --max-warnings=0 --fix",
     "tsc": "tsc"
   },
   "engines": {

plopfile.js

@@ -124,7 +124,7 @@ module.exports = function (
         }
       },
       function customAction() {
-        execSync('npm run autofix', { stdio: 'inherit' })
+        execSync('npm run autofix:store', { stdio: 'inherit' })
         return ''
       }
     ]

src/components/Layout/Layout.tsx

@@ -3,7 +3,7 @@ import type { AppProps } from 'next/app'
 import type { NavHandle } from '@/components/Nav'
 import type { PageProps } from '@/data/types'
 
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useRef } from 'react'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import classNames from 'classnames'
@@ -45,13 +45,6 @@ export const Layout: FC<AppProps<PageProps>> = memo(({ Component, pageProps }) =
 
   const router = useRouter()
 
-  const [introComplete, setIntroComplete] = useState(false)
-
-  const handleIntroComplete = useCallback(() => {
-    setIntroComplete(true)
-    storeState().animations.setAnimationsEnabled(true)
-  }, [])
-
   const handlePageMounted = useCallback(() => {
     storeState().navigation.setPathname(refs.pathname.current || '/')
     // restore scroll
@@ -78,10 +71,12 @@ export const Layout: FC<AppProps<PageProps>> = memo(({ Component, pageProps }) =
   // Update pathname ref
   //
   useEffect(() => {
-    refs.pathname.current = router.asPath
+    const fixedPath = router.asPath
       .split('#')[0]
       .split('?')[0]
       .replace(/^\/..-..\/?/u, '')
+    if (!refs.pathname.current) storeState().navigation.setPathname(fixedPath)
+    refs.pathname.current = fixedPath
   }, [refs, router.asPath])
 
   //
@@ -91,8 +86,8 @@ export const Layout: FC<AppProps<PageProps>> = memo(({ Component, pageProps }) =
     const navigateTo = (href: string) => {
       const to = href.split('/').filter(Boolean).join('/').replace(/\/$/u, '')
       const from = router.asPath.split('/').filter(Boolean).join('/').replace(/\/$/u, '')
-      if (to === from) router.replace(href, '', { scroll: false }).catch(console.log)
-      else router.push(href, '', { scroll: false }).catch(console.log)
+      if (to === from) router.replace(href, '', { scroll: false })
+      else router.push(href, '', { scroll: false })
     }
     const navigateBack = () => {
       if (storeState().navigation.hasNavigated) {
@@ -149,7 +144,7 @@ export const Layout: FC<AppProps<PageProps>> = memo(({ Component, pageProps }) =
 
       <Footer content={pageProps.content.common.footer} />
 
-      {!introComplete ? <ScreenIntro onComplete={handleIntroComplete} /> : null}
+      <ScreenIntro />
       <ScreenRotate content={pageProps.content.common.screenRotate} />
       <ScreenNoScript content={pageProps.content.common.screenNoScript} />
 

src/components/ScreenIntro/ScreenIntro.controller.tsx

@@ -1,17 +1,26 @@
 import type { FC } from 'react'
 
-import { memo } from 'react'
+import { memo, useCallback } from 'react'
+import dynamic from 'next/dynamic'
 
-import { View } from './ScreenIntro.view'
+import { store } from '@/store/store'
+
+const View = dynamic(() => import('./ScreenIntro.view').then((m) => m.View), { ssr: false })
 
 export interface ControllerProps {
   className?: string
-  onComplete?: () => void
 }
 
 // Controller (handles global state, router, data fetching, etc. Feeds props to the view component)
 export const Controller: FC<ControllerProps> = memo((props) => {
-  return <View {...props} />
+  const introComplete = store(({ animations }) => animations.introComplete)
+  const setIntroComplete = store(({ animations }) => animations.setIntroComplete)
+
+  const handleComplete = useCallback(() => {
+    setIntroComplete(true)
+  }, [setIntroComplete])
+
+  return introComplete ? null : <View {...props} onComplete={handleComplete} />
 })
 
 Controller.displayName = 'ScreenIntro_Controller'

src/components/ScreenIntro/ScreenIntro.view.tsx

@@ -9,7 +9,9 @@ import { useRefs } from '@/hooks/use-refs'
 
 import { Intro } from '@/motion/rive/Intro'
 
-export interface ViewProps extends ControllerProps {}
+export interface ViewProps extends ControllerProps {
+  onComplete?: () => void
+}
 
 export type ViewRefs = {
   root: HTMLDivElement

src/hooks/use-transition-presence.ts

@@ -8,15 +8,15 @@ export function useTransitionPresence(animations?: {
   animateIn?: () => gsap.core.Animation
   animateOut?: () => gsap.core.Animation
 }) {
-  const animationsEnabled = store((state) => state.animations.animationsEnabled)
+  const introComplete = store((state) => state.animations.introComplete)
 
   useEffect(() => {
-    if (!animations || !animationsEnabled) return
+    if (!animations || !introComplete) return
     const anim = animations.animateIn?.()
     return () => {
       anim?.kill()
     }
-  }, [animations, animationsEnabled])
+  }, [animations, introComplete])
 
   useBeforeUnmount(async (abortSignal) => {
     if (!animations?.animateOut) return

src/pages/_app.tsx

@@ -10,7 +10,7 @@ import { gsap } from 'gsap'
 
 import '@/styles/global.scss'
 
-import { store } from '@/store/store'
+import { store, storeState } from '@/store/store'
 
 import { AnalyticsService } from '@/services/analytics.service'
 import { AWSRumService } from '@/services/aws-rum.service'
@@ -85,6 +85,10 @@ const App: FC<AppProps<PageProps>> = (props) => {
     else document.documentElement.classList.remove('dynamic')
   }, [flags.dynamicResponsiveness])
 
+  useEffect(() => {
+    if (props.pageProps.noLayout) storeState().animations.setIntroComplete(true)
+  }, [props.pageProps.noLayout])
+
   return (
     <TransitionPresence>
       {props.pageProps.noLayout ? <props.Component {...props.pageProps} /> : <Layout {...props} />}

src/store/animations.slice.ts

@@ -4,19 +4,19 @@ import type { StateCreator } from 'zustand'
 export type AnimationsSliceState = {
   animations: {
     // getters
-    animationsEnabled: boolean
+    introComplete: boolean
     // setters
-    setAnimationsEnabled: (animationsEnabled: boolean) => void
+    setIntroComplete: (introComplete: boolean) => void
   }
 }
 
 export const AnimationsSlice: StateCreator<AppState, Mutators, [], AnimationsSliceState> = (set) => ({
   animations: {
-    animationsEnabled: !!process.env.STORYBOOK,
+    introComplete: !!process.env.STORYBOOK,
 
-    setAnimationsEnabled: (animationsEnabled) => {
+    setIntroComplete: (introComplete) => {
       set((state) => {
-        state.animations.animationsEnabled = animationsEnabled
+        state.animations.introComplete = introComplete
       })
     }
   }