Perf - Disable non-essential Homepage fetch #2563
Conversation
|
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 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. 📒 Files selected for processing (1)
WalkthroughThe changes introduce an optional Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
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. Comment |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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
Cardcomponent with alinkprop (line 38) renders as a clickable element, but it contains aLinkcomponent inside theTranstranslation (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_notesvshomepage_take_notes_link), accessibility must take precedence.Recommended refactor:
Either remove the
linkprop 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
📒 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.tsxsrc/components/HomePage/ReadingSection/index.tsxsrc/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsxsrc/components/HomePage/ReadingSection/ChapterCard/index.tsxsrc/components/HomePage/ExploreTopicsSection/index.tsxsrc/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsxsrc/components/HomePage/Card/index.tsxsrc/components/HomePage/QuickLinks/index.tsxsrc/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.tsxsrc/components/HomePage/ReadingSection/index.tsxsrc/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsxsrc/components/HomePage/ReadingSection/ChapterCard/index.tsxsrc/components/HomePage/ExploreTopicsSection/index.tsxsrc/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsxsrc/components/HomePage/Card/index.tsxsrc/components/HomePage/QuickLinks/index.tsxsrc/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.tsxsrc/components/HomePage/ReadingSection/index.tsxsrc/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsxsrc/components/HomePage/ReadingSection/ChapterCard/index.tsxsrc/components/HomePage/ExploreTopicsSection/index.tsxsrc/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsxsrc/components/HomePage/Card/index.tsxsrc/components/HomePage/QuickLinks/index.tsxsrc/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.tsxsrc/components/HomePage/ReadingSection/index.tsxsrc/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsxsrc/components/HomePage/ReadingSection/ChapterCard/index.tsxsrc/components/HomePage/ExploreTopicsSection/index.tsxsrc/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsxsrc/components/HomePage/Card/index.tsxsrc/components/HomePage/QuickLinks/index.tsxsrc/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 boundariesReact: use functional components only; extract reusable logic into custom hooks; apply proper memoization (React.memo/useMemo/useCallback)
Files:
src/components/HomePage/QuranInYearSection/index.tsxsrc/components/HomePage/ReadingSection/index.tsxsrc/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsxsrc/components/HomePage/ReadingSection/ChapterCard/index.tsxsrc/components/HomePage/ExploreTopicsSection/index.tsxsrc/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsxsrc/components/HomePage/Card/index.tsxsrc/components/HomePage/QuickLinks/index.tsxsrc/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.tsxsrc/components/HomePage/ReadingSection/index.tsxsrc/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsxsrc/components/HomePage/ReadingSection/ChapterCard/index.tsxsrc/components/HomePage/ExploreTopicsSection/index.tsxsrc/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsxsrc/components/HomePage/Card/index.tsxsrc/components/HomePage/QuickLinks/index.tsxsrc/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 usingany, preferunknownfor 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.tsxsrc/components/HomePage/ReadingSection/index.tsxsrc/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsxsrc/components/HomePage/ReadingSection/ChapterCard/index.tsxsrc/components/HomePage/ExploreTopicsSection/index.tsxsrc/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsxsrc/components/HomePage/Card/index.tsxsrc/components/HomePage/QuickLinks/index.tsxsrc/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.tsxsrc/components/HomePage/ReadingSection/index.tsxsrc/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsxsrc/components/HomePage/ReadingSection/ChapterCard/index.tsxsrc/components/HomePage/ExploreTopicsSection/index.tsxsrc/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsxsrc/components/HomePage/Card/index.tsxsrc/components/HomePage/QuickLinks/index.tsxsrc/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.tsxsrc/components/HomePage/ReadingSection/index.tsxsrc/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsxsrc/components/HomePage/ReadingSection/ChapterCard/index.tsxsrc/components/HomePage/ExploreTopicsSection/index.tsxsrc/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsxsrc/components/HomePage/Card/index.tsxsrc/components/HomePage/QuickLinks/index.tsxsrc/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.tsxsrc/components/HomePage/ReadingSection/index.tsxsrc/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsxsrc/components/HomePage/ReadingSection/ChapterCard/index.tsxsrc/components/HomePage/ExploreTopicsSection/index.tsxsrc/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsxsrc/components/HomePage/Card/index.tsxsrc/components/HomePage/QuickLinks/index.tsxsrc/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.tsxsrc/components/HomePage/ReadingSection/index.tsxsrc/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsxsrc/components/HomePage/ReadingSection/ChapterCard/index.tsxsrc/components/HomePage/ExploreTopicsSection/index.tsxsrc/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsxsrc/components/HomePage/Card/index.tsxsrc/components/HomePage/QuickLinks/index.tsxsrc/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.tsxsrc/components/HomePage/ReadingSection/index.tsxsrc/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsxsrc/components/HomePage/ReadingSection/ChapterCard/index.tsxsrc/components/HomePage/ExploreTopicsSection/index.tsxsrc/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsxsrc/components/HomePage/Card/index.tsxsrc/components/HomePage/QuickLinks/index.tsxsrc/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.tsxsrc/components/HomePage/ReadingSection/index.tsxsrc/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsxsrc/components/HomePage/ReadingSection/ChapterCard/index.tsxsrc/components/HomePage/ExploreTopicsSection/index.tsxsrc/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsxsrc/components/HomePage/Card/index.tsxsrc/components/HomePage/QuickLinks/index.tsxsrc/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.tsxsrc/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.tsxsrc/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.tsxsrc/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.tsxsrc/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.tsxsrc/components/HomePage/ReadingSection/index.tsxsrc/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.tsxsrc/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.tsxsrc/components/HomePage/ReadingSection/NoGoalOrStreakCard/index.tsxsrc/components/HomePage/ExploreTopicsSection/index.tsxsrc/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsxsrc/components/HomePage/Card/index.tsxsrc/components/HomePage/QuickLinks/index.tsxsrc/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.tsxsrc/components/HomePage/ReadingSection/ChapterCard/index.tsxsrc/components/HomePage/ReadingSection/StreakOrGoalCard/index.tsxsrc/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.tsxsrc/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.tsxsrc/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: ExplicitshouldPrefetch={false}is redundant but acceptable.The Card component already defaults
shouldPrefetchtofalse(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
shouldPrefetchprop is properly typed and follows the project's naming convention (cf.shouldShowSpinnerOnRevalidatepattern).
26-26: LGTM! Appropriate default value for shouldPrefetch.Defaulting
shouldPrefetchtofalsealigns 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
shouldPrefetchprop 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
Linkcomponent aligns with the PR's performance optimization goals and is appropriate for this usage.
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
Test plan
Checked with MCP Playwright that the changes took effect on the site.
Checklist
Summary by CodeRabbit