From 6e478fd37e2d3d4cae0f0742570a945371db43a3 Mon Sep 17 00:00:00 2001
From: Cooper Ransom <cooperransom08@outlook.com>
Date: Sat, 6 Apr 2024 12:44:21 -0400
Subject: [PATCH] Try fixing jank extensionBanner flow

---
 src/setup/Layout.tsx                 | 4 ++--
 src/stores/banner/BannerLocation.tsx | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/setup/Layout.tsx b/src/setup/Layout.tsx
index 5f1581a3..413689c3 100644
--- a/src/setup/Layout.tsx
+++ b/src/setup/Layout.tsx
@@ -29,11 +29,11 @@ export function Layout(props: { children: ReactNode }) {
 
   return (
     <div>
-      {extensionState !== "success" && !isMobile && (
+      {extensionState !== "success" ? (
         <div className="fixed inset-x-0 z-[1000]">
           <ExtensionBanner extensionState={extensionState} />
         </div>
-      )}
+      ) : null}
       <div
         style={{
           paddingTop: location === null ? `${bannerSize}px` : "0px",
diff --git a/src/stores/banner/BannerLocation.tsx b/src/stores/banner/BannerLocation.tsx
index 4b7fed61..c88a7969 100644
--- a/src/stores/banner/BannerLocation.tsx
+++ b/src/stores/banner/BannerLocation.tsx
@@ -3,6 +3,7 @@ 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";
 
@@ -69,6 +70,7 @@ export function ExtensionBanner(props: {
     /CrOS/.test(navigator.userAgent) ||
     /TV/.test(navigator.userAgent) ||
     /iPhone|iPad|iPod/i.test(navigator.userAgent);
+  const { isMobile } = useIsMobile();
 
   useEffect(() => {
     if (loc) {
@@ -88,7 +90,7 @@ export function ExtensionBanner(props: {
     return null;
 
   // Show the banner with a 36.5% chance or not if users dont meet requirements
-  if (!isEligible && Math.random() < 0.365) {
+  if (!isEligible && !isMobile && Math.random() < 0.365) {
     let bannerText = "";
     switch (props.extensionState) {
       case "noperms":