Perf - Fix mobile detection hydration mismatch

src/components/HomePage/ReadingSection/ChapterCard/index.tsx

@@ -9,12 +9,12 @@ import DataContext from '@/contexts/DataContext';
 import Button, { ButtonSize } from '@/dls/Button/Button';
 import IconContainer, { IconSize } from '@/dls/IconContainer/IconContainer';
 import Link, { LinkVariant } from '@/dls/Link/Link';
+import useIsMobile from '@/hooks/useIsMobile';
 import ArrowIcon from '@/icons/arrow.svg';
 import { getChapterData } from '@/utils/chapter';
 import { logButtonClick } from '@/utils/eventLogger';
 import { toLocalizedNumber } from '@/utils/locale';
 import { getChapterWithStartingVerseUrl } from '@/utils/navigation';
-import { isMobile } from '@/utils/responsive';
 
 type Props = {
   surahNumber: number;
@@ -31,6 +31,7 @@ const ChapterCard: React.FC<Props> = ({
   const chaptersData = useContext(DataContext);
   const surahNumberString = surahNumber.toString();
   const chapterData = getChapterData(chaptersData, surahNumberString);
+  const isMobileView = useIsMobile();
 
   const onContinueReadingClicked = () => {
     logButtonClick('homepage_chapter_card_continue_reading');
@@ -55,7 +56,7 @@ const ChapterCard: React.FC<Props> = ({
             </span>
             <span className={styles.translatedName} translate="no">
               {' '}
-              {isMobile() ? `${chapterData.translatedName}` : `(${chapterData.translatedName})`}
+              {isMobileView ? `${chapterData.translatedName}` : `(${chapterData.translatedName})`}
             </span>
           </div>
           {isContinueReading ? (

src/components/HomePage/ReadingSection/index.tsx

@@ -13,11 +13,11 @@ import StreakOrGoalCard from './StreakOrGoalCard';
 import Link, { LinkVariant } from '@/dls/Link/Link';
 import useGetRecentlyReadVerseKeys from '@/hooks/auth/useGetRecentlyReadVerseKeys';
 import useGetStreakWithMetadata from '@/hooks/auth/useGetStreakWithMetadata';
+import useIsMobile from '@/hooks/useIsMobile';
 import BookmarkRemoveIcon from '@/icons/bookmark_remove.svg';
 import { selectUserState } from '@/redux/slices/session';
 import { logButtonClick } from '@/utils/eventLogger';
 import { getProfileNavigationUrl } from '@/utils/navigation';
-import { isMobile } from '@/utils/responsive';
 
 interface Props {}
 
@@ -32,6 +32,7 @@ const ReadingSection: React.FC<Props> = () => {
   const { goal, streak, currentActivityDay } = useGetStreakWithMetadata({
     showDayName: true,
   });
+  const isMobileView = useIsMobile();
 
   const onMyQuranClicked = () => {
     logButtonClick('homepage_my_quran');
@@ -74,7 +75,7 @@ const ReadingSection: React.FC<Props> = () => {
     streak || goal ? (
       <StreakOrGoalCard currentActivityDay={currentActivityDay} goal={goal} streak={streak} />
     ) : (
-      <>{!isMobile() && <NoGoalOrStreakCard />}</>
+      <>{!isMobileView && <NoGoalOrStreakCard />}</>
     );
 
   const newCard = <NewCard />;
@@ -112,7 +113,7 @@ const ReadingSection: React.FC<Props> = () => {
   }
 
   if (!isGuest) {
-    if (isMobile()) {
+    if (isMobileView) {
       return (
         <>
           {header}

src/components/Onboarding/OnboardingProvider.tsx

@@ -10,6 +10,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import OnboardingStep from './OnboardingStep';
 import { checklistIndexToOnboardingSteps } from './steps';
 
+import useIsMobile from '@/hooks/useIsMobile';
 import useScrollToTop from '@/hooks/useScrollToTop';
 import { selectOnboardingActiveStep, setActiveStepIndex } from '@/redux/slices/onboarding';
 import OnboardingGroup from '@/types/OnboardingGroup';
@@ -39,10 +40,11 @@ export const OnboardingProvider = React.memo(({ children }: { children: React.Re
   const { t } = useTranslation('common');
   const dispatch = useDispatch();
   const scrollToTop = useScrollToTop();
+  const isMobileView = useIsMobile();
 
   const allSteps = useMemo(() => {
-    return checklistIndexToOnboardingSteps(t, OnboardingStep);
-  }, [t]);
+    return checklistIndexToOnboardingSteps(t, OnboardingStep, isMobileView);
+  }, [t, isMobileView]);
 
   const startTour = useCallback(
     (group = OnboardingGroup.HOMEPAGE, startIndex = 0) => {

src/components/Onboarding/steps.ts

@@ -6,7 +6,6 @@ import { Step as BaseStep, Placement } from 'react-joyride';
 
 import OnboardingGroup from '@/types/OnboardingGroup';
 import { getSurahNavigationUrl } from '@/utils/navigation';
-import { isMobile } from '@/utils/responsive';
 
 type Step = BaseStep & {
   showNextButton?: boolean;
@@ -31,6 +30,7 @@ const getResponsivePlacement = (
 export const checklistIndexToOnboardingSteps = (
   t: Translate,
   component: React.ElementType,
+  isDeviceMobile = false,
 ): Record<
   OnboardingGroup,
   {
@@ -56,7 +56,6 @@ export const checklistIndexToOnboardingSteps = (
     description: t(`onboarding:steps.${key}.description`),
   });
 
-  const isDeviceMobile = isMobile();
   const shouldDisableOverlay = isDeviceMobile;
 
   return {

src/components/QuranReader/ContextMenu/hooks/useContextMenuState.ts

@@ -6,6 +6,7 @@ import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useOnboarding } from '@/components/Onboarding/OnboardingProvider';
 import useDebounceNavbarVisibility from '@/hooks/useDebounceNavbarVisibility';
 import useGetMushaf from '@/hooks/useGetMushaf';
+import useIsMobile from '@/hooks/useIsMobile';
 import { selectNavbar } from '@/redux/slices/navbar';
 import { selectContextMenu } from '@/redux/slices/QuranReader/contextMenu';
 import { selectNotes } from '@/redux/slices/QuranReader/notes';
@@ -18,7 +19,6 @@ import { getChapterData, getChapterReadingProgress } from '@/utils/chapter';
 import { logEvent } from '@/utils/eventLogger';
 import { getJuzNumberByHizb } from '@/utils/juz';
 import { toLocalizedNumber } from '@/utils/locale';
-import { isMobile } from '@/utils/responsive';
 import { getVerseNumberFromKey } from '@/utils/verse';
 import DataContext from 'src/contexts/DataContext';
 /**
@@ -43,6 +43,7 @@ const useContextMenuState = () => {
   const showReadingPreferenceSwitcher = isReadingPreferenceSwitcherVisible && !isActive;
 
   const { verseKey, chapterId, page, hizb } = useSelector(selectLastReadVerseKey, shallowEqual);
+  const isMobileView = useIsMobile();
 
   // Memoized values
   const chapterData = useMemo(() => {
@@ -80,7 +81,7 @@ const useContextMenuState = () => {
     e.stopPropagation();
 
     if (isSidebarNavigationVisible === 'auto') {
-      const shouldBeVisible = isMobile();
+      const shouldBeVisible = isMobileView;
       dispatch(setIsSidebarNavigationVisible(shouldBeVisible));
     } else {
       dispatch(setIsSidebarNavigationVisible(!isSidebarNavigationVisible));

src/components/QuranReader/ContextMenu/index.tsx

@@ -15,8 +15,8 @@ import useContextMenuState from './hooks/useContextMenuState';
 import styles from './styles/ContextMenu.module.scss';
 
 import { SwitchSize, SwitchVariant } from '@/dls/Switch/Switch';
+import useIsMobile from '@/hooks/useIsMobile';
 import { Mushaf } from '@/types/QuranReader';
-import { isMobile } from '@/utils/responsive';
 import { getChapterNumberFromKey } from '@/utils/verse';
 
 /**
@@ -25,6 +25,7 @@ import { getChapterNumberFromKey } from '@/utils/verse';
  * @returns {JSX.Element|null} React component that renders the context menu UI with navigation, preferences, and page info, or null if data isn't loaded
  */
 const ContextMenu: React.FC = (): JSX.Element | null => {
+  const isMobileView = useIsMobile();
   const {
     // State
     isSidebarNavigationVisible,
@@ -53,8 +54,8 @@ const ContextMenu: React.FC = (): JSX.Element | null => {
     return null;
   }
 
-  const isMobileScrolledView = !showNavbar && isMobile();
-  const isNotMobileOrScrolledView = !showNavbar || !isMobile();
+  const isMobileScrolledView = !showNavbar && isMobileView;
+  const isNotMobileOrScrolledView = !showNavbar || !isMobileView;
 
   return (
     <div

src/components/QuranReader/SidebarNavigation/SidebarNavigation.tsx

@@ -15,6 +15,7 @@ import RevelationOrderNavigationNotice, {
 import Button, { ButtonShape, ButtonSize, ButtonVariant } from '@/dls/Button/Button';
 import KeyboardInput from '@/dls/KeyboardInput';
 import Switch from '@/dls/Switch/Switch';
+import useIsMobile from '@/hooks/useIsMobile';
 import useOutsideClickDetector from '@/hooks/useOutsideClickDetector';
 import IconClose from '@/icons/close.svg';
 import { selectNavbar } from '@/redux/slices/navbar';
@@ -27,7 +28,6 @@ import {
 } from '@/redux/slices/QuranReader/sidebarNavigation';
 import { selectIsReadingByRevelationOrder } from '@/redux/slices/revelationOrder';
 import { logButtonClick, logEvent, logValueChange } from '@/utils/eventLogger';
-import { isMobile } from '@/utils/responsive';
 
 const SidebarNavigation = () => {
   const router = useRouter();
@@ -40,14 +40,15 @@ const SidebarNavigation = () => {
   const dispatch = useDispatch();
   const { t } = useTranslation('common');
   const sidebarRef = useRef();
+  const isMobileView = useIsMobile();
 
   useOutsideClickDetector(
     sidebarRef,
     () => {
       logEvent('sidebar_navigation_close_outside_click');
       dispatch(setIsSidebarNavigationVisible(false));
     },
-    isSidebarVisible && isMobile(),
+    isSidebarVisible && isMobileView,
   );
 
   const navigationItems = [

src/components/QuranReader/SidebarNavigation/SidebarNavigationSelections.tsx

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import SidebarSelectionSkeleton from './SidebarSelectionSkeleton';
 
+import useIsMobile from '@/hooks/useIsMobile';
 import {
   selectLastReadVerseKey,
   setLastReadVerse,
@@ -15,7 +16,6 @@ import {
   setIsSidebarNavigationVisible,
 } from '@/redux/slices/QuranReader/sidebarNavigation';
 import NavigationItemType from '@/types/NavigationItemType';
-import { isMobile } from '@/utils/responsive';
 import DataContext from 'src/contexts/DataContext';
 
 const PageSelection = dynamic(() => import('./PageSelection'), {
@@ -40,6 +40,7 @@ const SidebarNavigationSelections: React.FC<Props> = ({ isVisible, selectedNavig
   const dispatch = useDispatch();
   const chaptersData = useContext(DataContext);
   const lastReadVerseKey = useSelector(selectLastReadVerseKey);
+  const isMobileView = useIsMobile();
   // we skip requesting any selection list if the drawer is not open.
   if (!isVisible) return <></>;
 
@@ -77,7 +78,7 @@ const SidebarNavigationSelections: React.FC<Props> = ({ isVisible, selectedNavig
   };
 
   const onAfterNavigationItemRouted = (itemValue?: string, itemType?: string) => {
-    if (isMobile()) {
+    if (isMobileView) {
       dispatch(setIsSidebarNavigationVisible(false));
     }
 

src/components/QuranicCalendar/MyProgress/index.tsx

@@ -12,12 +12,12 @@ import useMonthsData from './useMonthsData';
 
 import Button, { ButtonVariant } from '@/dls/Button/Button';
 import useGetUserQuranProgramEnrollment from '@/hooks/auth/useGetUserQuranProgramEnrollment';
+import useIsMobile from '@/hooks/useIsMobile';
 import { QURANIC_CALENDAR_PROGRAM_ID } from '@/utils/auth/constants';
 import { isLoggedIn } from '@/utils/auth/login';
 import { logButtonClick } from '@/utils/eventLogger';
 import { toLocalizedNumber } from '@/utils/locale';
 import { getLoginNavigationUrl, getQuranicCalendarNavigationUrl } from '@/utils/navigation';
-import { isMobile } from '@/utils/responsive';
 
 interface MyProgressProps {
   onWeekSelect: (weekNumber: number) => void;
@@ -34,6 +34,7 @@ const MyProgress: React.FC<MyProgressProps> = ({ onWeekSelect }) => {
   const { subscriptionData, isLoading: isSubscriptionLoading } = useGetUserQuranProgramEnrollment({
     programId: QURANIC_CALENDAR_PROGRAM_ID,
   });
+  const isMobileView = useIsMobile();
 
   // Function to determine the CSS class for a week
   const getWeekClass = useCallback(
@@ -82,7 +83,7 @@ const MyProgress: React.FC<MyProgressProps> = ({ onWeekSelect }) => {
       <p className={styles.subtitle}>{t('progress-subtitle')}</p>
 
       <div className={styles.progressCard}>
-        {isMobile() ? (
+        {isMobileView ? (
           <CarouselView
             monthSlides={monthSlides}
             getWeekClass={getWeekClass}

src/components/QuranicCalendar/QuranicCalendarHero/ActionButtons.tsx

@@ -7,12 +7,12 @@ import styles from './QuranicCalendarHero.module.scss';
 import Button, { ButtonShape, ButtonType } from '@/dls/Button/Button';
 import IconContainer, { IconSize } from '@/dls/IconContainer/IconContainer';
 import Spinner from '@/dls/Spinner/Spinner';
+import useIsMobile from '@/hooks/useIsMobile';
 import EmailIcon from '@/icons/email.svg';
 import TelegramIcon from '@/icons/telegram.svg';
 import TickIcon from '@/icons/tick.svg';
 import WhatsappIcon from '@/icons/whatsapp.svg';
 import { logButtonClick } from '@/utils/eventLogger';
-import { isMobile } from '@/utils/responsive';
 
 interface ActionButtonsProps {
   isSubscribed: boolean;
@@ -38,6 +38,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   onEnrollButtonClicked,
 }) => {
   const { t } = useTranslation('quranic-calendar');
+  const isMobileView = useIsMobile();
 
   const onJoinWhatsapp = () => {
     logButtonClick('quranic_calendar_join_whatsapp');
@@ -47,8 +48,6 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
     logButtonClick('quranic_calendar_join_telegram');
   };
 
-  const isMobileBrowser = isMobile();
-
   const socialButtons = (
     <>
       <Button
@@ -64,7 +63,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
           shouldForceSetColors={false}
           icon={<WhatsappIcon />}
         />
-        {isMobileBrowser ? t('join-whatsapp-mobile') : t('join-whatsapp')}
+        {isMobileView ? t('join-whatsapp-mobile') : t('join-whatsapp')}
       </Button>
       <Button
         onClick={onJoinTelegram}
@@ -79,7 +78,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
           shouldForceSetColors={false}
           icon={<TelegramIcon />}
         />
-        {isMobileBrowser ? t('join-telegram-mobile') : t('join-telegram')}
+        {isMobileView ? t('join-telegram-mobile') : t('join-telegram')}
       </Button>
     </>
   );
@@ -91,7 +90,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
         type={ButtonType.Success}
         shape={ButtonShape.Pill}
         isDisabled={isEnrolling}
-        className={isMobile() ? styles.subscribeButton : ''}
+        className={isMobileView ? styles.subscribeButton : ''}
       >
         <IconContainer
           className={styles.iconContainer}
@@ -102,7 +101,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
         />
         {isSubscribed ? t('common:subscribed') : t('common:subscribe')}
       </Button>
-      {isMobile() ? (
+      {isMobileView ? (
         <div className={styles.socialButtonsContainer}>{socialButtons}</div>
       ) : (
         socialButtons

src/components/QuranicCalendar/WeeklyVerses/ActionButtons.tsx

@@ -7,13 +7,13 @@ import useTranslation from 'next-translate/useTranslation';
 import styles from './WeeklyVerses.module.scss';
 
 import Button, { ButtonSize, ButtonVariant } from '@/dls/Button/Button';
+import useIsMobile from '@/hooks/useIsMobile';
 import PdfIcon from '@/icons/pdf.svg';
 import { logButtonClick } from '@/utils/eventLogger';
 import {
   getQuranicCalendarRangesNavigationUrl,
   QuranicCalendarRangesNavigationSettings,
 } from '@/utils/navigation';
-import { isMobile } from '@/utils/responsive';
 
 type ActionButtonsProps = {
   onMarkAsCompletedClick: () => void;
@@ -33,6 +33,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   ranges,
 }) => {
   const { t } = useTranslation('quranic-calendar');
+  const isMobileView = useIsMobile();
 
   const handlePdfClick = () => {
     logButtonClick('quran_calendar_pdf');
@@ -42,7 +43,12 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
     logButtonClick('quran_calendar_read_online');
   };
 
-  const isMobileBrowser = isMobile();
+  const getMarkAsCompletedLabel = () => {
+    if (isMobileView) return '\u2713';
+    return isCompleted ? t('week-completed') : t('mark-as-completed');
+  };
+
+  const markAsCompletedLabel = getMarkAsCompletedLabel();
 
   return (
     <div className={styles.actionButtons}>
@@ -57,7 +63,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
           [styles.completedButton]: isCompleted,
         })}
       >
-        {isMobileBrowser ? '✔' : !isCompleted ? t('mark-as-completed') : t('week-completed')}
+        {markAsCompletedLabel}
       </Button>
       <div className={styles.rightButtons}>
         <div className={styles.pdfButtonContainer}>