diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 3255c3998..29efe3686 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -23,6 +23,7 @@ import { NotificationMenu } from "components/Header/NotificationMenu"
 import { WarningModal } from "components/WarningModal"
 import PropTypes from "prop-types"
 import { BiArrowBack, BiCheckCircle } from "react-icons/bi"
+import { useParams } from "react-router-dom"
 
 import { useLoginContext } from "contexts/LoginContext"
 
@@ -48,7 +49,7 @@ const Header = ({
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { setRedirectToPage } = useRedirectHook()
-  const { siteName } = params
+  const { siteName } = useParams()
   const { data: stagingUrl, isLoading } = useStagingUrl({ siteName })
   const {
     isOpen: isWarningModalOpen,
@@ -204,7 +205,6 @@ const Header = ({
 }
 
 Header.defaultProps = {
-  siteName: undefined,
   showButton: true,
   title: undefined,
   isEditPage: false,
@@ -215,7 +215,6 @@ Header.defaultProps = {
 }
 
 Header.propTypes = {
-  siteName: PropTypes.string,
   showButton: PropTypes.bool,
   title: PropTypes.string,
   isEditPage: PropTypes.bool,
diff --git a/src/contexts/LoginContext.tsx b/src/contexts/LoginContext.tsx
index e2eb7eff2..336850744 100644
--- a/src/contexts/LoginContext.tsx
+++ b/src/contexts/LoginContext.tsx
@@ -17,6 +17,7 @@ import { LoggedInUser } from "types/user"
 const { REACT_APP_BACKEND_URL_V2: BACKEND_URL } = process.env
 
 interface LoginContextProps extends LoggedInUser {
+  isLoading: boolean
   logout: () => Promise<void>
   verifyLoginAndGetUserDetails: () => Promise<void>
 }
@@ -38,6 +39,7 @@ const LoginProvider = ({
     LOCAL_STORAGE_KEYS.SitesIsPrivate,
     false
   )
+  const [isLoading, setIsLoading] = useState(true)
   const [storedUserId, setStoredUserId] = useState("")
   const [storedUserContact, setStoredUserContact] = useState("")
   const [storedUserEmail, setStoredUserEmail] = useState("")
@@ -49,6 +51,7 @@ const LoginProvider = ({
     setStoredUserId(loggedInUser.userId)
     setStoredUserContact(loggedInUser.contactNumber)
     setStoredUserEmail(loggedInUser.email)
+    setIsLoading(false)
   }, [setStoredUserContact, setStoredUserEmail, setStoredUserId])
 
   const logout = async () => {
@@ -79,6 +82,7 @@ const LoginProvider = ({
   }, []) // Run only once
 
   const loginContextData = {
+    isLoading,
     userId: storedUserId,
     email: storedUserEmail,
     contactNumber: storedUserContact,
diff --git a/src/routing/ProtectedRoute.tsx b/src/routing/ProtectedRoute.tsx
index ca82c48c0..a03a1d96c 100644
--- a/src/routing/ProtectedRoute.tsx
+++ b/src/routing/ProtectedRoute.tsx
@@ -1,3 +1,4 @@
+import { Box, Center, Spinner } from "@chakra-ui/react"
 import axios from "axios"
 import _ from "lodash"
 import { Redirect, Route, RouteProps } from "react-router-dom"
@@ -20,7 +21,17 @@ export const ProtectedRoute = ({
   component: WrappedComponent,
   ...rest
 }: RouteProps): JSX.Element => {
-  const { displayedName } = useLoginContext()
+  const { displayedName, isLoading } = useLoginContext()
+
+  if (isLoading) {
+    return (
+      <Box h="100vh" w="100vw">
+        <Center h="100%" w="100%">
+          <Spinner size="lg" />
+        </Center>
+      </Box>
+    )
+  }
 
   if (displayedName && children) {
     return <Route {...rest}>{children}</Route>