Perf - Disable non-essential Homepage fetch

[zonetecde]

Summary

Made the homepage cards and buttons stop prefetching heavy Quran pages, so landing on the homepage doesn’t fire a bunch of background requests anymore.
Added a shouldPrefetch flag to the shared Card/Link usage so we can keep things quiet by default but opt in later if we really need it.

Type of change

• Bug fix (non-breaking change which fixes an issue)

Test plan

Checked with MCP Playwright that the changes took effect on the site.

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules
• I have commented on my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

Summary by CodeRabbit

• Chores
  • Optimized prefetch behavior across navigation links to reduce unnecessary resource loading and improve performance.

[coderabbitai]

Warning

Rate limit exceeded

@zonetecde has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 14 minutes and 41 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 650ca16 and 4825e16.

📒 Files selected for processing (1)

• src/components/HomePage/ReadingSection/NewCard/index.tsx (1 hunks)

Walkthrough

The changes introduce an optional shouldPrefetch prop to the Card component with a default value of false and propagate this prop through various HomePage sub-components. The prop is passed to Link and Button child components to control link prefetch behavior across the application.

Changes

Cohort / File(s)	Summary
Card component definition src/components/HomePage/Card/index.tsx	Added shouldPrefetch?: boolean optional prop to CardProps interface (defaults to false) and passed to Link child component
Reading section card components src/components/HomePage/ReadingSection/ChapterCard/index.tsx, src/components/HomePage/ReadingSection/NewCard/index.tsx, src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx, src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx	Added shouldPrefetch={false} prop to Card component usages and internal Link components
Explore and quick links src/components/HomePage/ExploreTopicsSection/index.tsx, src/components/HomePage/QuickLinks/index.tsx	Added shouldPrefetch={false} prop to Button component usages
Quran in year and reading sections src/components/HomePage/QuranInYearSection/index.tsx, src/components/HomePage/ReadingSection/index.tsx	Added shouldPrefetch={false} prop to Link and Button component usages

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Homogeneous changes across multiple files following a consistent pattern
• No complex logic modifications or control flow changes
• Straightforward prop addition with consistent default value

Poem

🐰 Through links and cards, we hop with care,
Prefetch disabled, light as air!
A whisker-twitch of props so neat,
Makes navigation fresh and fleet!
Control at last—oh, what a treat! 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title "Perf - Disable non-essential Homepage fetch" directly and clearly summarizes the main objective of the pull request. It uses the "Perf" prefix to signal a performance optimization, specifies the scope (Homepage), and describes the action (disabling non-essential prefetching). The title is concise, specific, and accurately reflects the core change across all modified files, which consistently add shouldPrefetch={false} to Card, Link, and Button components throughout the Homepage to prevent unnecessary background requests.
Description Check	✅ Passed	The pull request description is mostly complete and covers all critical sections of the template. It includes a clear Summary explaining the performance optimization and the new shouldPrefetch flag, properly identifies the Type of change as a bug fix, provides a Test plan with Playwright verification, and includes the Checklist with most items completed. While some non-critical checklist items (code comments, documentation updates, and custom test additions) are unchecked and the screenshots section is omitted, these absences are reasonable for a straightforward performance optimization that modifies existing components. The description effectively communicates the purpose, testing approach, and completion status of the work.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[zonetecde]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/HomePage/ReadingSection/NewCard/index.tsx (1)

33-73: Pre-existing accessibility issue: nested interactive elements.

The Card component with a link prop (line 38) renders as a clickable element, but it contains a Link component inside the Trans translation (lines 53-60). Both navigate to the same destination, creating nested interactive elements that violate HTML semantics and accessibility guidelines:

• Invalid HTML: anchor elements cannot be nested
• Breaks keyboard navigation and focus management
• Confuses screen readers and assistive technologies
• Violates WCAG and the project's guidelines for semantic HTML

While different analytics events are tracked (homepage_take_notes vs homepage_take_notes_link), accessibility must take precedence.

Recommended refactor:

Either remove the link prop from the Card and style it as a non-clickable container, or remove the inner Link and handle the translated text differently. For example:

// Option 1: Remove Card link prop, keep only inner Link
<Card
  onClick={() => {
    logButtonClick('homepage_take_notes');
  }}
  className={styles.firstTimeReadingCard}
  // Remove: link={getTakeNotesNavigationUrl()}
  // Remove: isNewTab
  shouldPrefetch={false}
>
  {/* Card content with Link inside */}
</Card>

// Option 2: Remove inner Link, use Card's link only
<Card
  onClick={() => {
    logButtonClick('homepage_take_notes');
    // Combine analytics if needed
  }}
  className={styles.firstTimeReadingCard}
  link={getTakeNotesNavigationUrl()}
  isNewTab
  shouldPrefetch={false}
>
  <div className={styles.cardOuterContainer}>
    {/* Render translated text without Link component */}
    <Trans i18nKey="home:take-notes" />
  </div>
</Card>

Note: Verify if analytics tracking requirements allow consolidating to a single click event.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c48a956 and 650ca16.

📒 Files selected for processing (9)

• src/components/HomePage/Card/index.tsx (2 hunks)
• src/components/HomePage/ExploreTopicsSection/index.tsx (1 hunks)
• src/components/HomePage/QuickLinks/index.tsx (1 hunks)
• src/components/HomePage/QuranInYearSection/index.tsx (2 hunks)
• src/components/HomePage/ReadingSection/ChapterCard/index.tsx (3 hunks)
• src/components/HomePage/ReadingSection/NewCard/index.tsx (2 hunks)
• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx (1 hunks)
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx (1 hunks)
• src/components/HomePage/ReadingSection/index.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (13)

**/*.*

📄 CodeRabbit inference engine (.cursor/rules/bug-handling-with-todo-comments.mdc)

If you encounter a bug in existing code, or the instructions lead to suboptimal or buggy code, add comments starting with "TODO:" outlining the problems.

**/*.*: Utilize Early Returns: Use early returns to avoid nested conditions and improve readability.
Conditional Classes: Prefer conditional classes over ternary operators for class attributes.

**/*.*: Use comments sparingly, and when you do, make them meaningful.
Don't comment on obvious things. Excessive or unclear comments can clutter the codebase and become outdated.
Use comments to convey the 'why' behind specific actions or explain unusual behavior and potential pitfalls.
Provide meaningful information about the function's behavior and explain unusual behavior and potential pitfalls.

**/*.*: Write short functions that only do one thing.
Follow the single responsibility principle (SRP), which means that a function should have one purpose and perform it effectively.
If a function becomes too long or complex, consider breaking it into smaller, more manageable functions.

Order functions with those that are composing other functions appearing earlier in the file. For example, if you have a menu with multiple buttons, define the menu function above the buttons.

**/*.*: Always add helpful comments to the code explaining what you are doing.
Never delete old comments, unless they are no longer relevant because the code has been rewritten or deleted.

**/*.*: Choose names for variables, functions, and classes that reflect their purpose and behavior.
A name should tell you why it exists, what it does, and how it is used. If a name requires a comment, then the name does not reveal its intent.
Use specific names that provide a clearer understanding of what the variables represent and how they are used.

Files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx
• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx
• src/components/HomePage/ReadingSection/ChapterCard/index.tsx
• src/components/HomePage/ExploreTopicsSection/index.tsx
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx
• src/components/HomePage/Card/index.tsx
• src/components/HomePage/QuickLinks/index.tsx
• src/components/HomePage/ReadingSection/NewCard/index.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/next-js-conventions.mdc)

**/*.{js,jsx,ts,tsx}: Rely on Next.js Pages Router for state changes.
Minimize 'use client' usage: Prefer server components and Next.js SSR features.
Minimize 'use client' usage: Use 'use client' only for Web API access in small components.
Minimize 'use client' usage: Avoid using 'use client' for data fetching or state management.

**/*.{js,jsx,ts,tsx}: Optimize Web Vitals (LCP, CLS, FID)
Use dynamic loading for non-critical components using @src/components/dls/Spinner/Spinner.tsx

Files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx
• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx
• src/components/HomePage/ReadingSection/ChapterCard/index.tsx
• src/components/HomePage/ExploreTopicsSection/index.tsx
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx
• src/components/HomePage/Card/index.tsx
• src/components/HomePage/QuickLinks/index.tsx
• src/components/HomePage/ReadingSection/NewCard/index.tsx

src/components/**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/react-functional-components.mdc)

src/components/**/*.tsx: Always use React functional components with hooks.
Use React.FC for functional components with props.

Files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx
• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx
• src/components/HomePage/ReadingSection/ChapterCard/index.tsx
• src/components/HomePage/ExploreTopicsSection/index.tsx
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx
• src/components/HomePage/Card/index.tsx
• src/components/HomePage/QuickLinks/index.tsx
• src/components/HomePage/ReadingSection/NewCard/index.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/react.mdc)

**/*.{tsx,jsx}: Use functional components over class components
Keep components small and focused
Extract reusable logic into custom hooks
Use composition over inheritance
Split large components into smaller, focused ones
Follow the Rules of Hooks
Use custom hooks for reusable logic
Use appropriate dependency arrays in useEffect
Implement cleanup in useEffect when needed
Avoid nested hooks
Use useState for local component state
Avoid prop drilling through proper state management
Implement proper memoization (useMemo, useCallback)
Use React.memo for expensive components
Avoid unnecessary re-renders
Implement proper lazy loading
Use proper key props in lists
Profile and optimize render performance
Show appropriate loading and error states
Handle async errors properly
Show user-friendly error messages
Implement proper fallback UI
Log errors appropriately
Handle edge cases gracefully
Use semantic HTML elements
Implement proper ARIA attributes
Ensure keyboard navigation
Handle focus management
Provide proper alt text for images
Use proper imports/exports
Document complex component logic

Files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx
• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx
• src/components/HomePage/ReadingSection/ChapterCard/index.tsx
• src/components/HomePage/ExploreTopicsSection/index.tsx
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx
• src/components/HomePage/Card/index.tsx
• src/components/HomePage/QuickLinks/index.tsx
• src/components/HomePage/ReadingSection/NewCard/index.tsx

**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/react.mdc)

Implement proper prop types with TypeScript

**/*.tsx: Prefix interfaces for React props with 'Props' (e.g., ButtonProps)
Implement proper error boundaries

React: use functional components only; extract reusable logic into custom hooks; apply proper memoization (React.memo/useMemo/useCallback)

Files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx
• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx
• src/components/HomePage/ReadingSection/ChapterCard/index.tsx
• src/components/HomePage/ExploreTopicsSection/index.tsx
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx
• src/components/HomePage/Card/index.tsx
• src/components/HomePage/QuickLinks/index.tsx
• src/components/HomePage/ReadingSection/NewCard/index.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/react.mdc)

Use xstate for complex state logic

**/*.{ts,tsx}: TypeScript: prefer interfaces over type aliases for object shapes; avoid any; add explicit return types for public functions
Error handling: define and use custom error types; use async/await correctly; show user-friendly error messages
Use Redux Toolkit for state management and XState for complex state machines
Implement i18n with next-translate in components and utilities

Files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx
• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx
• src/components/HomePage/ReadingSection/ChapterCard/index.tsx
• src/components/HomePage/ExploreTopicsSection/index.tsx
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx
• src/components/HomePage/Card/index.tsx
• src/components/HomePage/QuickLinks/index.tsx
• src/components/HomePage/ReadingSection/NewCard/index.tsx

**/*.{ts,tsx,d.ts}

📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)

**/*.{ts,tsx,d.ts}: Prefer interfaces over types for object definitions
Use type for unions, intersections, and mapped types
Avoid using any, prefer unknown for unknown types
Leverage TypeScript's built-in utility types
Use generics for reusable type patterns
Use PascalCase for type names and interfaces
Use camelCase for variables and functions
Use UPPER_CASE for constants
Use descriptive names with auxiliary verbs (e.g., isLoading, hasError)
Use explicit return types for public functions
Use arrow functions for callbacks and methods
Implement proper error handling with custom error types
Use function overloads for complex type scenarios
Prefer async/await over Promises
Use readonly for immutable properties
Leverage discriminated unions for type safety
Use type guards for runtime type checking
Implement proper null checking
Avoid type assertions unless necessary
Create custom error types for domain-specific errors
Use Result types for operations that can fail
Use try-catch blocks with typed catch clauses
Handle Promise rejections properly

Files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx
• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx
• src/components/HomePage/ReadingSection/ChapterCard/index.tsx
• src/components/HomePage/ExploreTopicsSection/index.tsx
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx
• src/components/HomePage/Card/index.tsx
• src/components/HomePage/QuickLinks/index.tsx
• src/components/HomePage/ReadingSection/NewCard/index.tsx

{src,types}/**/*.ts?(x)

📄 CodeRabbit inference engine (CLAUDE.md)

Use TypeScript throughout the codebase with strict configuration

Files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx
• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx
• src/components/HomePage/ReadingSection/ChapterCard/index.tsx
• src/components/HomePage/ExploreTopicsSection/index.tsx
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx
• src/components/HomePage/Card/index.tsx
• src/components/HomePage/QuickLinks/index.tsx
• src/components/HomePage/ReadingSection/NewCard/index.tsx

src/**/*.tsx

📄 CodeRabbit inference engine (CLAUDE.md)

Prefer React functional components for UI implementation

Files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx
• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx
• src/components/HomePage/ReadingSection/ChapterCard/index.tsx
• src/components/HomePage/ExploreTopicsSection/index.tsx
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx
• src/components/HomePage/Card/index.tsx
• src/components/HomePage/QuickLinks/index.tsx
• src/components/HomePage/ReadingSection/NewCard/index.tsx

{src,types}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Use path aliases @/ for src and @/dls/* for design system imports

Files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx
• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx
• src/components/HomePage/ReadingSection/ChapterCard/index.tsx
• src/components/HomePage/ExploreTopicsSection/index.tsx
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx
• src/components/HomePage/Card/index.tsx
• src/components/HomePage/QuickLinks/index.tsx
• src/components/HomePage/ReadingSection/NewCard/index.tsx

src/components/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Organize React components by feature and place DLS components under src/components/dls

Files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx
• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx
• src/components/HomePage/ReadingSection/ChapterCard/index.tsx
• src/components/HomePage/ExploreTopicsSection/index.tsx
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx
• src/components/HomePage/Card/index.tsx
• src/components/HomePage/QuickLinks/index.tsx
• src/components/HomePage/ReadingSection/NewCard/index.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,js,jsx}: Order imports: React first, then external, then internal; alphabetize within groups with blank lines between groups
Naming: camelCase for variables/functions; PascalCase for types, interfaces, and React components; UPPER_CASE for constants
Functions should be <= 30 lines, prefer early returns, single responsibility, and descriptive names

Files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx
• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx
• src/components/HomePage/ReadingSection/ChapterCard/index.tsx
• src/components/HomePage/ExploreTopicsSection/index.tsx
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx
• src/components/HomePage/Card/index.tsx
• src/components/HomePage/QuickLinks/index.tsx
• src/components/HomePage/ReadingSection/NewCard/index.tsx

**/*.{ts,tsx,js,jsx,scss}

📄 CodeRabbit inference engine (AGENTS.md)

Use Prettier formatting: single quotes, 2-space indentation, 100-character line width, and trailing commas

Files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx
• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx
• src/components/HomePage/ReadingSection/ChapterCard/index.tsx
• src/components/HomePage/ExploreTopicsSection/index.tsx
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx
• src/components/HomePage/Card/index.tsx
• src/components/HomePage/QuickLinks/index.tsx
• src/components/HomePage/ReadingSection/NewCard/index.tsx

🧠 Learnings (20)

📓 Common learnings

Learnt from: Osama-Elshimy
Repo: quran/quran.com-frontend-next PR: 2500
File: src/components/DataFetcher/index.tsx:40-41
Timestamp: 2025-09-25T23:23:27.647Z
Learning: The DataFetcher component's showSpinnerOnRevalidate prop had a default value of true, not false. When it was renamed to shouldShowSpinnerOnRevalidate in a Next.js upgrade PR, the default value remained true, making it a behavior-neutral rename.

📚 Learning: 2025-10-09T11:21:33.919Z

Learnt from: zonetecde
Repo: quran/quran.com-frontend-next PR: 2523
File: src/components/QuranicCalendar/MyProgress/MonthCard.tsx:48-49
Timestamp: 2025-10-09T11:21:33.919Z
Learning: In the Quran in a Year calendar feature (src/components/QuranicCalendar/MyProgress/MonthCard.tsx), instant scrolling (window.scrollTo({ top: 0 }) without smooth behavior) is preferred over smooth scrolling when selecting a week. This is because instant scrolling provides immediate visual feedback of the verses and date changing, whereas smooth scrolling makes it look like nothing is changing during the animation.

Applied to files:

• src/components/HomePage/QuranInYearSection/index.tsx

📚 Learning: 2025-10-22T20:42:09.214Z

Learnt from: yousefdergham
Repo: quran/quran.com-frontend-next PR: 2547
File: src/pages/learning-plans/[slug]/lessons/[lessonSlugOrId]/index.tsx:35-59
Timestamp: 2025-10-22T20:42:09.214Z
Learning: Preference for quran.com-frontend-next: keep single-use, page-specific components inline. Example: NotEnrolledMessage in src/pages/learning-plans/[slug]/lessons/[lessonSlugOrId]/index.tsx should remain inline; extract only if reused elsewhere.

Applied to files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx

📚 Learning: 2025-10-22T20:33:55.176Z

Learnt from: yousefdergham
Repo: quran/quran.com-frontend-next PR: 2547
File: src/components/Course/CourseDetails/Tabs/Syllabus/index.tsx:44-49
Timestamp: 2025-10-22T20:33:55.176Z
Learning: Preference: In quran.com-frontend-next, keep concise “why” comments for analytics/UX decision points (e.g., guest vs enrolled click handlers) but avoid verbose JSDoc that repeats params/types. Convert multi-line JSDoc to brief inline rationale comments, especially in src/components/Course/CourseDetails/Tabs/Syllabus/index.tsx and similar analytics handlers.

Applied to files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx

📚 Learning: 2025-09-19T13:57:41.697Z

Learnt from: mohsinayoob
Repo: quran/quran.com-frontend-next PR: 2495
File: src/utils/auth/constants.ts:37-50
Timestamp: 2025-09-19T13:57:41.697Z
Learning: In the quran.com-frontend-next codebase, prefer TypeScript's readonly modifier over Object.freeze() for array immutability when compile-time protection is sufficient.

Applied to files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx

📚 Learning: 2025-10-26T10:22:52.381Z

Learnt from: afifvdin
Repo: quran/quran.com-frontend-next PR: 2540
File: src/components/QuranReader/TranslationView/TranslationText/TranslationAndReference.tsx:60-60
Timestamp: 2025-10-26T10:22:52.381Z
Learning: In src/components/QuranReader/TranslationView/TranslationText/TranslationAndReference.tsx, verse references displayed alongside chapter names should use English/Western numerals only, not localized numerals, as per design specifications.

Applied to files:

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

📚 Learning: 2025-10-19T11:34:07.609Z

Learnt from: afifvdin
Repo: quran/quran.com-frontend-next PR: 2540
File: src/components/Verse/PlainVerseText/index.tsx:4-4
Timestamp: 2025-10-19T11:34:07.609Z
Learning: In src/components/Verse/PlainVerseText/index.tsx, the translation for verse titles should be wired directly to the component using next-translate rather than passed as props from parent components, as this ensures the wording from locales is centralized and only needs to be changed in one place.

Applied to files:

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

📚 Learning: 2025-10-28T09:59:48.894Z

Learnt from: afifvdin
Repo: quran/quran.com-frontend-next PR: 2557
File: src/components/QuranReader/ReflectionView/ReflectionBodyContainer/ReflectionBody/index.tsx:88-0
Timestamp: 2025-10-28T09:59:48.894Z
Learning: In src/components/QuranReader/ReflectionView/ReflectionBodyContainer/ReflectionBody/index.tsx, the empty `<div className={styles.separatorContainer} />` rendered when `isModal` is true is required for maintaining consistent spacing in modal view and should not be removed.

Applied to files:

• src/components/HomePage/QuranInYearSection/index.tsx

📚 Learning: 2025-10-20T15:16:53.776Z

Learnt from: afifvdin
Repo: quran/quran.com-frontend-next PR: 2540
File: src/components/QuranReader/TranslationView/TranslationText/TranslationAndReference.tsx:14-23
Timestamp: 2025-10-20T15:16:53.776Z
Learning: In the quran.com-frontend-next codebase, the `direction` property should be typed as `string` rather than using union types like `'ltr' | 'rtl'` to maintain consistency with the established codebase pattern (e.g., LanguageData interface in src/utils/locale.ts).

Applied to files:

• src/components/HomePage/QuranInYearSection/index.tsx

📚 Learning: 2025-10-20T14:56:29.087Z

Learnt from: afifvdin
Repo: quran/quran.com-frontend-next PR: 2540
File: src/components/QuranReader/TranslationView/TranslationText/TranslationText.module.scss:56-63
Timestamp: 2025-10-20T14:56:29.087Z
Learning: In the quran.com-frontend-next repository, link styling (including the .referenceLink class) should follow the design specifications. If the design doesn't include underlines for links, don't suggest adding them even for accessibility considerations.

Applied to files:

• src/components/HomePage/QuranInYearSection/index.tsx
• src/components/HomePage/ReadingSection/index.tsx

📚 Learning: 2025-09-25T23:23:27.647Z

Learnt from: Osama-Elshimy
Repo: quran/quran.com-frontend-next PR: 2500
File: src/components/DataFetcher/index.tsx:40-41
Timestamp: 2025-09-25T23:23:27.647Z
Learning: The DataFetcher component's showSpinnerOnRevalidate prop had a default value of true, not false. When it was renamed to shouldShowSpinnerOnRevalidate in a Next.js upgrade PR, the default value remained true, making it a behavior-neutral rename.

Applied to files:

• src/components/HomePage/ReadingSection/index.tsx
• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx
• src/components/HomePage/ExploreTopicsSection/index.tsx
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx
• src/components/HomePage/Card/index.tsx
• src/components/HomePage/QuickLinks/index.tsx
• src/components/HomePage/ReadingSection/NewCard/index.tsx

📚 Learning: 2025-10-19T10:49:21.536Z

Learnt from: afifvdin
Repo: quran/quran.com-frontend-next PR: 2539
File: src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx:50-54
Timestamp: 2025-10-19T10:49:21.536Z
Learning: In src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx, the component intentionally uses different analytics event names based on goal state: `homepage_reading_streak_card` when no goal exists and `homepage_reading_goal_card_arrow` when a goal exists. This is by design to track different user interaction contexts.

Applied to files:

• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx
• src/components/HomePage/ReadingSection/ChapterCard/index.tsx
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx
• src/components/HomePage/ReadingSection/NewCard/index.tsx

📚 Learning: 2025-10-26T03:27:28.728Z

Learnt from: afifvdin
Repo: quran/quran.com-frontend-next PR: 2545
File: src/pages/reading-goal/index.tsx:31-35
Timestamp: 2025-10-26T03:27:28.728Z
Learning: In src/pages/reading-goal/index.tsx, the initialExampleKey is intentionally computed only when isLoggedIn() is true. This is by design: guest users can interact with the page and select options manually, but the example URL parameter only pre-selects an option for logged-in users (typically after being redirected back from login). The example selection is preserved through the authentication redirect flow.

Applied to files:

• src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx
• src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx

📚 Learning: 2025-08-01T08:51:28.930Z

Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-08-01T08:51:28.930Z
Learning: Applies to **/*.tsx : Prefix interfaces for React props with 'Props' (e.g., ButtonProps)

Applied to files:

• src/components/HomePage/ExploreTopicsSection/index.tsx
• src/components/HomePage/QuickLinks/index.tsx

📚 Learning: 2025-10-07T08:38:28.343Z

Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-07T08:38:28.343Z
Learning: Applies to **/*.tsx : React: use functional components only; extract reusable logic into custom hooks; apply proper memoization (React.memo/useMemo/useCallback)

Applied to files:

• src/components/HomePage/QuickLinks/index.tsx

📚 Learning: 2025-08-01T08:50:54.518Z

Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/*.{tsx,jsx} : Avoid unnecessary re-renders

Applied to files:

• src/components/HomePage/QuickLinks/index.tsx

📚 Learning: 2025-10-07T08:37:58.213Z

Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-10-07T08:37:58.213Z
Learning: Applies to src/**/*.tsx : Prefer React functional components for UI implementation

Applied to files:

• src/components/HomePage/QuickLinks/index.tsx

📚 Learning: 2025-08-01T08:50:54.518Z

Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/*.{test,spec}.{tsx,jsx} : Test user interactions

Applied to files:

• src/components/HomePage/QuickLinks/index.tsx

📚 Learning: 2025-08-01T08:50:54.518Z

Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/*.{tsx,jsx} : Profile and optimize render performance

Applied to files:

• src/components/HomePage/QuickLinks/index.tsx

📚 Learning: 2025-08-01T08:50:54.518Z

Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/use*.{tsx,jsx} : Keep hooks focused and simple

Applied to files:

• src/components/HomePage/QuickLinks/index.tsx

🔇 Additional comments (14)

src/components/HomePage/ExploreTopicsSection/index.tsx (1)

66-66: LGTM! Prefetch correctly disabled for external navigation.

Disabling prefetch for these topic buttons is appropriate, especially since they open in new tabs (isNewTab) where prefetching would waste bandwidth.

src/components/HomePage/ReadingSection/ChapterCard/index.tsx (3)

46-46: Note: Explicit shouldPrefetch={false} is redundant but acceptable.

The Card component already defaults shouldPrefetch to false (src/components/HomePage/Card/index.tsx:26), so explicitly passing it here is technically unnecessary. However, the explicit usage may be intentional for clarity and to make the prefetch behavior obvious to future maintainers.

---

62-67: LGTM! Continue reading link correctly disables prefetch.

The Link properly disables prefetch for the "continue reading" navigation, preventing unnecessary background requests for chapter pages.

---

85-85: LGTM! Begin button correctly disables prefetch.

The Button properly disables prefetch for the "begin" navigation.

src/components/HomePage/QuickLinks/index.tsx (1)

86-86: LGTM! Quick link prefetch correctly disabled.

Disabling prefetch for quick link buttons is appropriate since users may not navigate to all (or any) of these optional targets. This prevents unnecessary prefetching of multiple chapter/verse pages.

src/components/HomePage/QuranInYearSection/index.tsx (2)

44-49: LGTM! Calendar link prefetch correctly disabled.

Disabling prefetch for the calendar CTA link prevents unnecessary loading of the calendar page when users may not navigate to it.

---

74-74: LGTM! Calendar button prefetch correctly disabled.

Disabling prefetch for the "Quran in Year" CTA button is appropriate for optional navigation.

src/components/HomePage/ReadingSection/index.tsx (1)

58-58: LGTM! My Quran link prefetch correctly disabled.

Disabling prefetch for the profile/My Quran navigation link prevents unnecessary loading of the profile page from the homepage.

src/components/HomePage/Card/index.tsx (3)

16-16: LGTM! Card API correctly extended with shouldPrefetch prop.

The optional shouldPrefetch prop is properly typed and follows the project's naming convention (cf. shouldShowSpinnerOnRevalidate pattern).

---

26-26: LGTM! Appropriate default value for shouldPrefetch.

Defaulting shouldPrefetch to false aligns perfectly with the PR objective of preventing unnecessary prefetching on the homepage, making prefetching opt-in rather than opt-out.

---

30-36: LGTM! Prop correctly forwarded to Link component.

The shouldPrefetch prop is properly forwarded to the Link component when the Card renders as a navigable element.

src/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsx (1)

54-54: LGTM! Streak/goal card prefetch correctly disabled.

Disabling prefetch for the streak or goal card navigation prevents unnecessary loading of the reading goal pages from the homepage. (Note: Explicit shouldPrefetch={false} is technically redundant given Card's default, but maintains consistency with the pattern used throughout the PR.)

src/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsx (1)

23-23: LGTM! No goal card prefetch correctly disabled.

Disabling prefetch for the "achieve Quran goals" card navigation prevents unnecessary loading of the reading goal setup page. (Note: Explicit shouldPrefetch={false} is technically redundant given Card's default, but maintains consistency with the pattern used throughout the PR.)

src/components/HomePage/ReadingSection/NewCard/index.tsx (1)

59-59: Prefetch optimization applied correctly.

Explicitly disabling prefetch on the Link component aligns with the PR's performance optimization goals and is appropriate for this usage.