Skip to content

Conversation

@noisysocks
Copy link
Contributor

@noisysocks noisysocks commented Dec 3, 2025

Asana Task/Github Issue:

Description

Replaces static background color in history/public/index.html with a dynamic $LOADING_COLOR$ token. This prevents a white flash during page initialization by allowing the native browser to set the background color.

Testing Steps

  • Verify the <style> block in special-pages/pages/history/public/index.html matches the new structure.
  • (If possible with a browser build) Observe the History page loading to confirm the background color during initialization.

Checklist

Please tick all that apply:

  • I have tested this change locally
  • I have tested this change locally in all supported browsers
  • This change will be visible to users
  • I have added automated tests that cover this change
  • I have ensured the change is gated by config
  • This change was covered by a ship review
  • This change was covered by a tech design
  • Any dependent config has been merged

Open in Cursor Open in Web


Note

Injects a head script that sets the page background to $LOADING_COLOR$ pre-render to avoid color flash.

  • History page loading background:
    • Add head script in special-pages/pages/history/public/index.html to set document.documentElement.style.background from $LOADING_COLOR$ before render.

Written by Cursor Bugbot for commit 6d107be. This will update automatically on new commits. Configure here.

@cursor
Copy link

cursor bot commented Dec 3, 2025

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
Learn more about Cursor Agents

@netlify
Copy link

netlify bot commented Dec 3, 2025

Deploy Preview for content-scope-scripts ready!

Name Link
🔨 Latest commit 6d107be
🔍 Latest deploy log https://app.netlify.com/projects/content-scope-scripts/deploys/6930d3b73e4b24000876dcd9
😎 Deploy Preview https://deploy-preview-2075--content-scope-scripts.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions
Copy link

github-actions bot commented Dec 3, 2025

Temporary Branch Update

The temporary branch has been updated with the latest changes. Below are the details:

Please use the above install command to update to the latest version.

@github-actions
Copy link

github-actions bot commented Dec 3, 2025

[Beta] Generated file diff

Time updated: Thu, 04 Dec 2025 00:22:07 GMT

Apple
    - apple/pages/history/index.html

File has changed

Integration
    - integration/pages/history/index.html

File has changed

Windows
    - windows/pages/history/index.html

File has changed

@noisysocks
Copy link
Contributor Author

noisysocks commented Dec 4, 2025

@cursor Instead of removing the #333 and #fafafa styling let’s implement this in a way that will keep the default styles if native browser doesn’t perform the interpolation. Something like this:

<script>
        // $LOADING_COLOR$ is replaced by native via string interpolation.
        // This script must be in <head> to block rendering and prevent flash of wrong color.
        const loadingColor = "$LOADING_COLOR$";
        const hasLoadingColor = !!loadingColor && !loadingColor.startsWith("$");
        if (hasLoadingColor) {
            document.documentElement.style.background = loadingcolor;
        }
</script>

@cursor
Copy link

cursor bot commented Dec 4, 2025

Done! I've updated the implementation as requested. The file now:

  1. Keeps the original CSS styles (#fafafa for light mode, #333 for dark mode) as fallback defaults
  2. Adds a script in <head> that conditionally applies the loading color only if the native browser performed the interpolation

Note: I fixed a small typo in the suggested code (loadingcolorloadingColor).

    <style>
        html, body {
            background: #fafafa;
        }
        @media screen and (prefers-color-scheme: dark) {
            html, body {
                background: #333;
            }
        }
    </style>
    <script>
        // $LOADING_COLOR$ is replaced by native via string interpolation.
        // This script must be in <head> to block rendering and prevent flash of wrong color.
        const loadingColor = "$LOADING_COLOR$";
        const hasLoadingColor = !!loadingColor && !loadingColor.startsWith("$");
        if (hasLoadingColor) {
            document.documentElement.style.background = loadingColor;
        }
    </script>

Open in Cursor Open in Web

Learn more about Cursor Agents

@noisysocks noisysocks marked this pull request as ready for review December 4, 2025 00:21
@noisysocks noisysocks requested review from a team, mgurgel and shakyShane as code owners December 4, 2025 00:21
@noisysocks noisysocks added this pull request to the merge queue Dec 4, 2025
Merged via the queue into main with commit 841429d Dec 4, 2025
25 checks passed
@noisysocks noisysocks deleted the cursor/update-history-page-loading-background-style-claude-4.5-opus-high-thinking-4779 branch December 4, 2025 23:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants