AYS-354 | fix permission issue (#203)

Author: sanshigo345

src/app/hocs/isAuth.tsx

@@ -1,10 +1,11 @@
 'use client'
 
 import { useRouter } from 'next/navigation'
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useAppSelector } from '@/store/hooks'
 import { selectPermissions, selectToken } from '@/modules/auth/authSlice'
 import { Permission } from '@/constants/permissions'
+import { LoadingSpinner } from '@/components/ui/loadingSpinner'
 
 interface PrivateRouteProps {
   children: React.ReactNode
@@ -20,6 +21,8 @@ const PrivateRoute = ({ children, requiredPermissions }: PrivateRouteProps) => {
     [userPermissions],
   )
 
+  const [isAuthorized, setIsAuthorized] = useState<boolean>(false)
+
   useEffect(() => {
     if (!token) {
       router.push('/login')
@@ -32,11 +35,22 @@ const PrivateRoute = ({ children, requiredPermissions }: PrivateRouteProps) => {
 
       if (!hasPermission) {
         router.push('/not-found')
+        return
       }
     }
+
+    setIsAuthorized(true)
   }, [token, router, memoizedPermissions, requiredPermissions])
 
-  return token && userPermissions?.length > 0 ? children : null
+  if (!token || (requiredPermissions && !isAuthorized)) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <LoadingSpinner size={96} />
+      </div>
+    )
+  }
+
+  return children
 }
 
 export default PrivateRoute