Fix content flickering during main page load

8kto · Feb 7, 2024 · cc4e230 · cc4e230
1 parent e3d8f89
commit cc4e230
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/src/components/InventoryPageTabs.tsx b/src/components/InventoryPageTabs.tsx
@@ -25,9 +25,9 @@ const InventoryPageTabs = ({
 
   if (!isMounted) {
     return (
-      <>
+      <div className='min-h-screen'>
         <Spinner />
-      </>
+      </div>
     )
   }
 

diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
@@ -3,7 +3,10 @@ import React from 'react'
 
 const Spinner = () => {
   return (
-    <div role='status' className='flex h-1/3 items-center justify-center'>
+    <div
+      role='status'
+      className='flex min-h-screen items-center justify-center'
+    >
       <svg
         aria-hidden='true'
         className='h-20 w-20 animate-spin fill-red-400 text-gray-200'

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -14,7 +14,7 @@ const Header = () => {
       <nav className='ph-header-wrapper fixed z-30 w-full border-2 border-b border-gray-400 px-4 py-4 text-white'>
         <div className='mx-auto flex w-full max-w-screen-2xl items-center justify-between px-0 sm:px-4 lg:px-4 xl:px-8'>
           <div className='flex items-center'>
-            <Link href='/' className='flex items-center'>
+            <Link href='/inventory' className='flex items-center'>
               <h1
                 className={`${cursiveFont.className} whitespace-nowrap text-3xl font-semibold`}
               >

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,7 @@
 import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import React, { useEffect } from 'react'
+
+import Spinner from '@/components/Spinner'
 
 const IndexPage = () => {
   const router = useRouter()
@@ -8,7 +10,7 @@ const IndexPage = () => {
     router.push('/inventory')
   }, [router])
 
-  return null // Render nothing or a loader while redirecting
+  return <Spinner />
 }
 
 export default IndexPage