From 39e21ebef6ae63766b9c2f17cdba80ed4898eab4 Mon Sep 17 00:00:00 2001
From: Charis <26616127+charislam@users.noreply.github.com>
Date: Thu, 11 Dec 2025 15:14:07 -0500
Subject: [PATCH] fix(studio): flash of sign in for join organization page
 (#41283)

The join organization page flashes the sign in screen briefly because it
does not check for loading status. Fixed so it goes directly from
loading skeleton to join confirmation view.

Resolves FE-2220
---
 .../interfaces/OrganizationInvite/OrganizationInvite.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
index 37413a9ba01..1e2bf10fb2a 100644
--- a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
+++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { toast } from 'sonner'
 
-import { useParams } from 'common'
+import { useIsLoggedIn, useParams } from 'common'
 import { useOrganizationAcceptInvitationMutation } from 'data/organization-members/organization-invitation-accept-mutation'
 import { useOrganizationInvitationTokenQuery } from 'data/organization-members/organization-invitation-token-query'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
@@ -14,7 +14,8 @@ import { OrganizationInviteError } from './OrganizationInviteError'
 
 export const OrganizationInvite = () => {
   const router = useRouter()
-  const { profile } = useProfile()
+  const isLoggedIn = useIsLoggedIn()
+  const { profile, isLoading: isLoadingProfile } = useProfile()
   const { slug, token } = useParams()
 
   const isSignUpEnabled = useIsFeatureEnabled('dashboard_auth:sign_up')
@@ -67,7 +68,7 @@ export const OrganizationInvite = () => {
         'md:w-[400px]'
       )}
     >
-      {!profile ? (
+      {!isLoggedIn || (!profile && !isLoadingProfile) ? (
         <>
           <Admonition
             showIcon={false}
@@ -86,7 +87,7 @@ export const OrganizationInvite = () => {
             )}
           </div>
         </>
-      ) : isLoadingInvitation ? (
+      ) : isLoadingProfile || isLoadingInvitation ? (
         <div className="p-5">
           <GenericSkeletonLoader />
         </div>