load sticky header faster

[xecdev]

This PR fixes #85. The login script now initializes using jQuery(function($){…}), ensuring it runs as soon as the DOM is ready even when loaded in the footer. This makes the Cashtab login PayButton render reliably across all themes. The sticky header output is still hooked into wp_body_open with higher priority now so it appears earlier in the markup.

Test Plan

• Install the plugin
• Clear the cache and check the Sticky Header loads with the page

Summary by CodeRabbit

• Performance Improvements

  • Login state now initializes earlier during page rendering for quicker display and interaction of the login button.

• Refactor

  • Adjusted sticky header rendering order so the header appears in a more consistent position relative to other page elements.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Greptile Overview

Greptile Summary

Changed sticky header initialization from window.load to jQuery(function($){…}) and increased wp_body_open hook priority to 5 to load the header faster.

Critical Issue Found:

• The JavaScript file is loaded in the footer (after DOM parsing), but registers a DOMContentLoaded event listener that will have already fired by the time the script loads
• This means the login button will never be initialized, breaking the entire login functionality
• The PHP change is good and will output the header HTML earlier, but the JavaScript won't execute to make it functional

Recommendation:
Use jQuery's ready handler jQuery(function() { ... }) instead, which executes immediately if the DOM is already ready, or waits if it's not.

Confidence Score: 1/5

• This PR contains a critical bug that will break login functionality - the sticky header will render but won't be functional
• While the PHP change is correct and beneficial, the JavaScript change introduces a race condition that will prevent the login button from initializing in most cases, completely breaking the login feature the sticky header depends on
• Pay immediate attention to assets/js/paybutton-paywall-cashtab-login.js - the DOMContentLoaded listener needs to be replaced with jQuery's ready handler

Important Files Changed

File Analysis

Filename	Score	Overview
assets/js/paybutton-paywall-cashtab-login.js	2/5	Changed event from load to DOMContentLoaded but script loads in footer - event may never fire if DOM already ready
includes/class-paybutton-public.php	5/5	Added priority 5 to wp_body_open hook to ensure sticky header renders earlier in markup

Sequence Diagram

sequenceDiagram
    participant Browser
    participant WordPress
    participant StickyHeader
    participant LoginScript
    participant PayButton
    
    Browser->>WordPress: Page Load Request
    WordPress->>WordPress: Process wp_body_open hook (priority 5)
    WordPress->>StickyHeader: output_sticky_header()
    StickyHeader->>Browser: Render sticky header HTML with loginPaybutton div
    
    Note over Browser: DOM continues parsing...
    
    Browser->>Browser: DOMContentLoaded event fires
    
    Note over Browser: Footer scripts load...
    
    WordPress->>Browser: Load paybutton-core (header)
    WordPress->>Browser: Load jQuery (header)
    WordPress->>Browser: Load paybutton-cashtab-login (footer)
    LoginScript->>LoginScript: Register DOMContentLoaded listener
    
    Note over LoginScript: ⚠️ Issue: DOMContentLoaded already fired,<br/>so listener never executes
    
    LoginScript--xPayButton: renderLoginPaybutton() never called
    Browser--xPayButton: Login button not initialized

Loading

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Replaced the window 'load' listener with a jQuery document-ready wrapper in the login JS and explicitly set isLoggedIn = true when already logged in; changed the wp_body_open action registration to attach output_sticky_header with priority 5.

Changes

Cohort / File(s)	Change Summary
Login state / initialization assets/js/paybutton-paywall-cashtab-login.js	Replaced window 'load' event listener with a jQuery $(document).ready(...) wrapper to initialize on DOM ready; kept rendering login button when not logged in and added explicit isLoggedIn = true assignment in the else branch when user is already logged in.
Hook priority adjustment includes/class-paybutton-public.php	Modified the wp_body_open action registration to attach output_sticky_header with priority 5 (was default/no explicit priority), affecting execution order relative to other wp_body_open callbacks.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Look at assets/js/paybutton-paywall-cashtab-login.js for correct jQuery ready usage and any timing assumptions that previously relied on window.load.
• Verify the added isLoggedIn = true assignment doesn't conflict with other login-state logic.
• Confirm priority 5 for wp_body_open places the sticky header in the intended order relative to other callbacks.

Possibly related PRs

• autologin after content unlock #100 — Modifies frontend login-state / sticky-header flow; likely touches same rendering order and JS state.
• improve sticky header button UI/UX #95 — Adjusts the same login/logout JS flow and isLoggedIn handling.

Suggested reviewers

• Klakurka

Poem

🐰 I hopped in at document-ready time,
A tiny flag set true in rhyme.
Priority five, I take my place—
A sticky banner, snug embrace.
Hop, click, and log in with grace ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'load sticky header faster' directly describes the main change: improving sticky header loading performance by adjusting initialization and hook priority.
Linked Issues check	✅ Passed	The changes address both objectives from issue #85: (1) sticky header output now hooks with priority 5 for earlier markup placement, and (2) login script uses jQuery(function($){}) for reliable DOM-ready initialization in footer-loaded scripts.
Out of Scope Changes check	✅ Passed	All changes are directly related to improving sticky header loading: the jQuery document-ready wrapper ensures footer-loaded scripts initialize properly, and the hook priority change ensures earlier HTML placement.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/load-sticky-header-faster

---

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.}

[greptile-apps]

_{2 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}