diff --git a/src/components/Config.jsx b/src/components/Config.jsx
index b260309c9..0f12a7826 100644
--- a/src/components/Config.jsx
+++ b/src/components/Config.jsx
@@ -9,8 +9,7 @@ import Utility from '@services/Utility'
 import { deepMerge } from '@services/functions/deepMerge'
 import { Navigate } from 'react-router-dom'
 import { checkHoliday } from '@services/functions/checkHoliday'
-
-const rootLoading = document.getElementById('loader')
+import { useHideElement } from '@hooks/useHideElement'
 
 export default function Config({ children }) {
   const { t } = useTranslation()
@@ -20,11 +19,8 @@ export default function Config({ children }) {
     fetched: false,
   })
 
-  if (rootLoading) {
-    if (serverSettings.fetched) {
-      rootLoading.style.display = 'none'
-    }
-  }
+  useHideElement(serverSettings.fetched)
+
   const getServerSettings = async () => {
     const data = await Fetch.getSettings()
 
diff --git a/src/components/Errors.jsx b/src/components/Errors.jsx
index 4971908cc..3d779ea0d 100644
--- a/src/components/Errors.jsx
+++ b/src/components/Errors.jsx
@@ -4,18 +4,12 @@ import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
 import Button from '@mui/material/Button'
 import { useTranslation } from 'react-i18next'
-
-const rootLoading = document.getElementById('loader')
+import { useHideElement } from '@hooks/useHideElement'
 
 export default function Errors() {
   const { t } = useTranslation()
   const error = window.location.href.split('/').pop()
-
-  React.useEffect(() => {
-    if (rootLoading) {
-      rootLoading.style.display = 'none'
-    }
-  }, [])
+  useHideElement()
 
   return (
     <Grid
diff --git a/src/components/ReactRouter.jsx b/src/components/ReactRouter.jsx
index 98310f7d6..699c01a90 100644
--- a/src/components/ReactRouter.jsx
+++ b/src/components/ReactRouter.jsx
@@ -22,7 +22,11 @@ const loginRoute = (
   </Config>
 )
 const resetRoute = <ClearStorage />
-const blockedRoute = <Blocked />
+const blockedRoute = (
+  <Config>
+    <Blocked />
+  </Config>
+)
 const errorRoute = <Errors />
 
 export default function ReactRouter() {
diff --git a/src/components/layout/auth/Blocked.jsx b/src/components/layout/auth/Blocked.jsx
index ea966aead..b8a8f6d77 100644
--- a/src/components/layout/auth/Blocked.jsx
+++ b/src/components/layout/auth/Blocked.jsx
@@ -6,13 +6,15 @@ import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
 import Button from '@mui/material/Button'
 import { useStatic } from '@hooks/useStore'
+import { useHideElement } from '@hooks/useHideElement'
 
 import DiscordLogin from './Discord'
 
 export default function Blocked() {
   const { t } = useTranslation()
   const { info } = useParams()
-  const discordInvite = useStatic((s) => s.config.links.discordInvite)
+  const discordInvite = useStatic((s) => s.config?.links?.discordInvite)
+  useHideElement()
 
   const queryParams = new URLSearchParams(info)
 
diff --git a/src/hooks/useHideElement.js b/src/hooks/useHideElement.js
new file mode 100644
index 000000000..d75a9c1bf
--- /dev/null
+++ b/src/hooks/useHideElement.js
@@ -0,0 +1,11 @@
+import { useEffect } from 'react'
+
+const rootLoading = document.getElementById('loader')
+
+export function useHideElement(ready = true) {
+  useEffect(() => {
+    if (rootLoading && ready) {
+      rootLoading.style.display = 'none'
+    }
+  }, [])
+}