preload font, only show header items when they're done loading

components/header.js

@@ -23,6 +23,7 @@ export default function Header () {
   const [session, loading] = useSession()
   const [sort, setSort] = useState('recent')
   const [within, setWithin] = useState()
+  const [priceReady, setPriceReady] = useState()
 
   useEffect(() => {
     setSort(localStorage.getItem('sort') || 'recent')
@@ -127,6 +128,8 @@ export default function Header () {
     }
   }
 
+  const visible = ((session && me) || (!session && !loading)) && priceReady ? 'visible' : 'invisible'
+
   return (
     <>
       <Container className='px-sm-0'>
@@ -141,13 +144,13 @@ export default function Header () {
             <Link href='/' passHref>
               <Navbar.Brand className={`${styles.brand} d-block d-sm-none`}>SN</Navbar.Brand>
             </Link>
-            <Nav.Item className='d-md-flex d-none nav-dropdown-toggle'>
+            <Nav.Item className={`d-md-flex d-none nav-dropdown-toggle ${visible}`}>
               <SplitButton
                 title={
                   <Link href={sortLink} passHref>
                     <Nav.Link className={styles.navLink}>{sort}</Nav.Link>
                   </Link>
-              }
+                }
                 key={`/${sort}`}
                 id='recent-top-button'
                 variant='link'
@@ -158,7 +161,7 @@ export default function Header () {
                 </Link>
               </SplitButton>
             </Nav.Item>
-            <Nav.Item className='d-md-flex d-none'>
+            <Nav.Item className={`d-md-flex d-none ${visible}`}>
               {me
                 ? (
                   <Link href='/post' passHref>
@@ -167,13 +170,15 @@ export default function Header () {
                   )
                 : <Nav.Link className={styles.navLink} onClick={signIn}>post</Nav.Link>}
             </Nav.Item>
-            <Nav.Item className='d-md-flex d-none'>
+            <Nav.Item className={`d-md-flex d-none ${visible}`}>
               <Nav.Link href='https://bitcoinerjobs.co' target='_blank' className={styles.navLink}>jobs</Nav.Link>
             </Nav.Item>
-            <Nav.Item className='text-monospace' style={{ opacity: '.5' }}>
+            <Nav.Item className={`text-monospace ${visible}`} style={{ opacity: '.5' }}>
-              <Price />
+              <Price onReady={() => setPriceReady(true)} />
             </Nav.Item>
-            <Corner />
+            <div className={visible}>
+              <Corner />
+            </div>
           </Nav>
         </Navbar>
       </Container>

components/header.module.css

@@ -23,4 +23,9 @@
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
+}
+
+.easein {
+  transition-timing-function: ease;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
 }

components/price.js

@@ -4,7 +4,7 @@ import useSWR from 'swr'
 
 const fetcher = url => fetch(url).then(res => res.json())
 
-export default function Price () {
+export default function Price ({ onReady }) {
   const [asSats, setAsSats] = useState(undefined)
   useEffect(() => {
     setAsSats(localStorage.getItem('asSats'))
@@ -17,6 +17,12 @@ export default function Price () {
       refreshInterval: 30000
     })
 
+  useEffect(() => {
+    if (onReady) {
+      onReady()
+    }
+  }, [data])
+
   if (!data || !data.data) return null
 
   const fixed = (n, f) => Number.parseFloat(n).toFixed(f)
@@ -32,14 +38,14 @@ export default function Price () {
 
   if (asSats) {
     return (
-      <Button className='text-reset' onClick={handleClick} variant='link'>
+      <Button className='text-reset py-0' onClick={handleClick} variant='link'>
         {fixed(100000000 / data.data.amount, 0) + ' sats/$'}
       </Button>
     )
   }
 
   return (
-    <Button className='text-reset' onClick={handleClick} variant='link'>
+    <Button className='text-reset py-0' onClick={handleClick} variant='link'>
       {'$' + fixed(data.data.amount, 2)}
     </Button>
   )

pages/_document.js

@@ -4,9 +4,11 @@ class MyDocument extends Document {
   render () {
     return (
       <Html>
-        <Head />
+        <Head>
+          <link rel='preload' href='/Lightningvolt-xoqm.ttf' as='font' type='font/ttf' crossOrigin='' />
+        </Head>
         <body>
-          <script src='darkmode.js' />
+          <script src='darkmode.js' type='module' />
           <Main />
           <NextScript />
         </body>

public/darkmode.js

@@ -1,6 +1,6 @@
 // Insert this script in your index.html right after the <body> tag.
 // This will help to prevent a flash if dark mode is the default.
-export const COLORS = {
+const COLORS = {
   light: {
     body: '#f5f5f5',
     color: '#212529',
@@ -45,7 +45,7 @@ export const handleThemeChange = (dark) => {
 
 if (typeof window !== 'undefined') {
   (function () {
-  // Change these if you use something different in your hook.
+    // Change these if you use something different in your hook.
     const storageKey = 'darkMode'
 
     const preferDarkQuery = '(prefers-color-scheme: dark)'