@@ -6,6 +6,7 @@ import { usePathname, useRouter } from 'next/navigation';
6
6
7
7
import { useContext , useEffect , useState } from 'react' ;
8
8
import { FiHelpCircle , FiMenu } from 'react-icons/fi' ;
9
+ import { ImSpinner2 } from 'react-icons/im' ;
9
10
import { IoMdArrowBack , IoMdClose } from 'react-icons/io' ;
10
11
import { MdHome } from 'react-icons/md' ;
11
12
@@ -23,7 +24,7 @@ function Navbar() {
23
24
const [ sidebarToggle , setSidebarToggle ] = useState ( false ) ;
24
25
const [ isHomePage , setIsHomePage ] = useState ( true ) ;
25
26
26
- const { isSigningInUser, reload} = useContext ( AppContext )
27
+ const { isSigningInUser, reload, alertMessage } = useContext ( AppContext )
27
28
28
29
// check if the current page is the homepage
29
30
useEffect ( ( ) => {
@@ -54,13 +55,26 @@ function Navbar() {
54
55
55
56
return (
56
57
< >
57
- < div
58
- className = { `w-full h-[76.19px] z-500 px-[16px] py-[5px] bg-primary fixed top-0 left-0 right-0 ` } >
58
+ < div className = "w-full h-[76.19px] z-500 px-[16px] py-[5px] bg-primary fixed top-0 left-0 right-0" >
59
59
< div className = "text-center text-secondary text-[1.3rem] whitespace-nowrap" >
60
- { isSigningInUser || reload ? t ( 'SHARED.LOADING_SCREEN_MESSAGE' ) : "Map of Pi" }
60
+ { /* Display alert message with spinner if present, otherwise display 'Map of Pi' */ }
61
+ { alertMessage ? (
62
+ < div className = "alert-message flex items-center justify-center text-[1rem]" > { /* Adjust font size */ }
63
+ < ImSpinner2 className = "animate-spin mr-2 ml-1" /> { /* Spinner Icon */ }
64
+ { alertMessage }
65
+ </ div >
66
+ ) : (
67
+ isSigningInUser || reload ? (
68
+ < div className = "flex items-center justify-center" >
69
+ < ImSpinner2 className = "animate-spin mr-2 ml-1" /> { /* Spinner Icon */ }
70
+ { t ( 'SHARED.LOADING_SCREEN_MESSAGE' ) }
71
+ </ div >
72
+ ) : (
73
+ "Map of Pi"
74
+ )
75
+ ) }
61
76
</ div >
62
- < div
63
- className = "flex justify-between" >
77
+ < div className = "flex justify-between" >
64
78
< div className = { `${ styles . nav_item } ${ isHomePage && 'disabled' } ` } >
65
79
< Link href = "/" onClick = { handleBackBtn } >
66
80
< IoMdArrowBack size = { 26 } className = { `${ isHomePage ? 'text-tertiary' : 'text-secondary' } ` } />
@@ -103,9 +117,7 @@ function Navbar() {
103
117
) : (
104
118
< FiMenu
105
119
size = { 24 }
106
- className = { `${
107
- isSigningInUser ? 'text-tertiary cursor-not-allowed' : 'text-secondary'
108
- } `}
120
+ className = { `${ isSigningInUser ? 'text-tertiary cursor-not-allowed' : 'text-secondary' } ` }
109
121
/>
110
122
) }
111
123
</ Link >
0 commit comments