diff --git a/src/setup/Layout.tsx b/src/setup/Layout.tsx index 413689c3..82c4ae8f 100644 --- a/src/setup/Layout.tsx +++ b/src/setup/Layout.tsx @@ -1,6 +1,5 @@ import { ReactNode, useEffect, useState } from "react"; -import { useIsMobile } from "@/hooks/useIsMobile"; import { useBannerSize, useBannerStore } from "@/stores/banner"; import { ExtensionBanner } from "@/stores/banner/BannerLocation"; import { getExtensionState } from "@/utils/extension"; @@ -11,7 +10,7 @@ export function Layout(props: { children: ReactNode }) { const location = useBannerStore((s) => s.location); const [extensionState, setExtensionState] = useState("unknown"); - const { isMobile } = useIsMobile(); + const [storeLoaded, setStoreLoaded] = useState(false); useEffect(() => { let isMounted = true; @@ -19,6 +18,7 @@ export function Layout(props: { children: ReactNode }) { getExtensionState().then((state) => { if (isMounted) { setExtensionState(state); + setStoreLoaded(true); } }); @@ -29,7 +29,7 @@ export function Layout(props: { children: ReactNode }) { return (
- {extensionState !== "success" ? ( + {storeLoaded && extensionState !== "success" ? (
diff --git a/src/stores/banner/BannerLocation.tsx b/src/stores/banner/BannerLocation.tsx index c88a7969..bd34e801 100644 --- a/src/stores/banner/BannerLocation.tsx +++ b/src/stores/banner/BannerLocation.tsx @@ -3,7 +3,6 @@ import { Trans, useTranslation } from "react-i18next"; import { useLocation, useNavigate } from "react-router-dom"; import { Icon, Icons } from "@/components/Icon"; -import { useIsMobile } from "@/hooks/useIsMobile"; import { useBannerStore, useRegisterBanner } from "@/stores/banner"; import type { ExtensionStatus } from "@/utils/extension"; @@ -66,11 +65,11 @@ export function ExtensionBanner(props: { const currentLocation = useBannerStore((s) => s.location); const loc = props.location ?? null; const { pathname } = useLocation(); - const isEligible = + const isEligible = !( /CrOS/.test(navigator.userAgent) || /TV/.test(navigator.userAgent) || - /iPhone|iPad|iPod/i.test(navigator.userAgent); - const { isMobile } = useIsMobile(); + /iPhone|iPad|iPod/i.test(navigator.userAgent) + ); useEffect(() => { if (loc) { @@ -89,8 +88,8 @@ export function ExtensionBanner(props: { if (currentLocation !== loc || pathname === "/onboarding/extension") return null; - // Show the banner with a 36.5% chance or not if users dont meet requirements - if (!isEligible && !isMobile && Math.random() < 0.365) { + // Show the banner with a 36.5% chance or not if users don't meet requirements + if (isEligible && Math.random() < 0.365) { let bannerText = ""; switch (props.extensionState) { case "noperms":