القائمة
Fixing React mount timing in WSH 2026 — changing from window.load to DOMContentLoaded for earlier hydration.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Crok AI chat rendering optimization — SSE debouncing, ChatMessage memoization, Markdown re-render prevention
DM page and flow optimization — afterSave hook, message rendering, unread count queries for WSH 2026
Home page performance optimization — Post defaultScope, SSR data reduction, lazy media hydration for WSH 2026 CaX app
Lazy loading modal containers and route components to reduce initial bundle size — CrokContainer, NewPostModalContainer
SSE streaming optimization — batching char-by-char events and debouncing React re-renders for Crok AI chat performance
Runs Visual Regression Testing (VRT) locally to prevent disqualification in Web Speed Hackathon. Captures screenshots, compares against baselines, updates snapshots, and validates visual integrity after performance optimizations. Use when optimizing WSH apps, running VRT checks, updating VRT baselines, or investigating VRT failures.
| name | wsh-react-mount |
| description | Fixing React mount timing in WSH 2026 — changing from window.load to DOMContentLoaded for earlier hydration. |
The app delays React mounting until window.load, which fires only after ALL resources (images, fonts, scripts, stylesheets) are fully loaded. This adds seconds to FCP/LCP.
Use this skill when fixing the React mount event listener.
// Before
window.addEventListener("load", () => {
createRoot(document.getElementById("app")!).render(...);
});
// After — mount immediately (script is at top of <head>)
// Option 1: DOMContentLoaded
document.addEventListener("DOMContentLoaded", () => {
createRoot(document.getElementById("app")!).render(...);
});
// Option 2: defer script + immediate mount (preferred)
// In webpack HTML plugin or index.html, add defer to script tag
// Then just mount immediately:
createRoot(document.getElementById("app")!).render(...);
Impact: FCP -2-5s, LCP -2-5s, SI improvement
| Pitfall | Symptom | Fix |
|---|---|---|
| #app div not in DOM yet | null reference error | Use DOMContentLoaded or defer |
| Script loaded before DOM parsed | Mount fails | Ensure script is deferred or use DOMContentLoaded |
| Change | Visual Impact | Mitigation |
|---|---|---|
| Earlier mount | Content appears sooner | No visual change, only timing |
application/client/src/index.tsxapplication/client/src/index.html<script src="/scripts/main.js"></script> (no defer/async)<div id="app"></div> is in the body, script is in headdefer to script tag AND use DOMContentLoaded