diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/LivePortrait.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/LivePortrait.tsx index 5873d02bb6..43081424c5 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/LivePortrait.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/LivePortrait.tsx @@ -12,6 +12,7 @@ import { Container, Label, Panel, + SessionFetchingSpinner, } from "components/common"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { @@ -49,6 +50,7 @@ import { useDocumentTitle } from "@storyteller/components/src/hooks/UseDocumentT import SourceEntityInput from "./SourceEntityInput"; import MotionEntityInput from "./MotionEntityInput"; import OutputThumbnailImage from "./OutputThumbnailImage"; +import LoginBlock from "components/common/LoginBlock"; interface LivePortraitProps { sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; @@ -73,7 +75,7 @@ export default function LivePortrait({ }: LivePortraitProps) { useDocumentTitle("Live Portrait AI. Free Video Animation"); const { enqueueInferenceJob } = useInferenceJobs(); - const { loggedIn, loggedInOrModal } = useSession(); + const { loggedIn, loggedInOrModal, sessionFetched } = useSession(); const { open, close } = useModal(); const [isEnqueuing, setIsEnqueuing] = useState(false); const [selectedSourceIndex, setSelectedSourceIndex] = useState(0); @@ -698,6 +700,19 @@ export default function LivePortrait({ } }; + if (!sessionFetched) { + return ; + } + + if (!loggedIn) { + return ( + + ); + } + return ( <>