▸case-01 We have a heavy chart dashboard component in our React 18 application currently imported synchronously as `import HeavyChart from './HeavyChart'`. Developers want to lazy load it to cut down initial bundle size. A common mistake is rendering `React.lazy` without a wrapper, causing runtime rendering crashes. Write the complete React component implementation. | pass→pass | 21,542 | 23,383 | +9% | 1 | 1 | 0% | 3,197 | 4,216 | +32% | 0 | 0 | — |
▸case-02 When lazy loading dynamic components in React, network failures during chunk fetching cause unhandled rejection crashes. A junior developer created a lazy component but relied on standard try/catch inside the render function. Write a resilient React lazy component setup that catches chunk loading errors using class lifecycle methods and provides a retry mechanism. | pass→pass | 27,171 | 27,377 | +1% | 1 | 1 | 0% | 5,549 | 4,722 | -15% | 0 | 0 | — |
▸case-03 In a Vue 3 Single Page Application, we want to lazy load a heavy editor component using Vue's built-in async component API. A developer proposed using basic promises, but we need full configuration including a loading component and a 300ms delay to prevent visual flicker on fast connections. Write the Vue 3 component definition. | pass→pass | 7,057 | 16,175 | +129% | 1 | 1 | 0% | 1,366 | 2,634 | +93% | 0 | 0 | — |
▸case-04 In a Vue 3 application, lazy loading an expensive modal component can hang indefinitely if the chunk fails to load due to network instability. Write a `defineAsyncComponent` configuration that specifies an explicit timeout of 5000ms and supplies a dedicated error component. | pass→pass | 11,531 | 7,194 | -38% | 1 | 1 | 0% | 1,202 | 1,657 | +38% | 0 | 0 | — |
▸case-05 We are building an e-commerce catalog with hundreds of images below the fold. A developer wants to attach custom window scroll listeners to every image element to load them manually when visible. What native HTML attribute should be applied directly to `<img>` tags for browser-managed lazy loading, and what dimensional attributes must be present to prevent Cumulative Layout Shift (CLS)? | pass→pass | 3,821 | 11,810 | +209% | 1 | 1 | 0% | 708 | 1,478 | +109% | 0 | 0 | — |
▸case-06 Our blog posts embed several third-party video iframes located deep at the bottom of articles. They currently load immediately on page render, degrading initial Largest Contentful Paint (LCP). How should the `<iframe>` markup be configured using standard HTML attributes to defer loading until near the viewport? | pass→pass | 12,679 | 13,199 | +4% | 1 | 1 | 0% | 1,436 | 1,767 | +23% | 0 | 0 | — |
▸case-07 We need a JavaScript utility to defer setting the `src` attribute on target elements from `data-src` when they scroll into view. A developer suggested checking `getBoundingClientRect()` inside a continuous window scroll listener. Refactor this using modern Web APIs for high performance and clean up memory once loaded. | pass→pass | 12,679 | 32,507 | +156% | 1 | 1 | 0% | 2,384 | 6,227 | +161% | 0 | 0 | — |
▸case-08 When using `IntersectionObserver` to lazy load media assets below the fold, setting `rootMargin` to `0px` causes users to see blank placeholder boxes when scrolling fast. Configure an `IntersectionObserver` options object that pre-fetches assets 200 pixels before they enter the visible viewport. | pass→fail | 11,171 | 7,342 | -34% | 1 | 1 | 0% | 1,185 | 1,704 | +44% | 0 | 0 | — |
▸case-09 We have long scrollable pages with thousands of DOM nodes causing scrolling lag. Developers considered removing offscreen DOM nodes with JavaScript, which breaks browser text search (`Ctrl+F`). What CSS property allows the browser to skip layout and rendering work for offscreen elements while preserving searchability, and how do we prevent scrollbar jumps? | pass→pass | 12,504 | 10,303 | -18% | 1 | 1 | 0% | 1,237 | 2,203 | +78% | 0 | 0 | — |
▸case-10 When lazy loading images with placeholder SVG skeletons, screen reader users often hear repetitive or missing image announcements. What HTML/ARIA attributes must be configured on the primary image and the temporary skeleton container to maintain accessibility? | pass→pass | 18,376 | 21,988 | +20% | 1 | 1 | 0% | 2,898 | 3,329 | +15% | 0 | 0 | — |
▸case-11 A community forum dynamically lazy loads incoming comments as the user scrolls to the page bottom. Screen reader users are unnotified when new content loads dynamically into the DOM tree. How should the comments container be annotated with ARIA attributes to announce new additions non-intrusively? | pass→pass | 15,620 | 11,261 | -28% | 1 | 1 | 0% | 1,931 | 2,349 | +22% | 0 | 0 | — |
▸case-12 After lazy loading product card images, our Cumulative Layout Shift (CLS) score increased dramatically because the page reflows when image files complete downloading. What modern CSS property guarantees that the container holds aspect space before the image binary resolves? | pass→pass | 11,167 | 14,119 | +26% | 1 | 1 | 0% | 1,054 | 2,075 | +97% | 0 | 0 | — |
▸case-13 A site performance audit revealed that the Largest Contentful Paint (LCP) element is the main hero banner image at the top of the page. A developer added `loading="lazy"` across all `<img>` tags globally, which delayed the hero image download. How should the hero banner image attributes be set for LCP optimization? | pass→pass | 9,541 | 15,317 | +61% | 1 | 1 | 0% | 1,866 | 2,272 | +22% | 0 | 0 | — |
▸case-14 We want to configure route-level code splitting in React Router v6 using dynamic imports so page bundles only download when a user navigates to the route. Provide the React Router route definition and boundary setup. | pass→pass | 13,726 | 23,120 | +68% | 1 | 1 | 0% | 2,752 | 4,107 | +49% | 0 | 0 | — |
▸case-15 We are serving WebP images with responsive display sizes using HTML `<picture>`, `<source>`, and `<img>` tags. A developer placed `loading="lazy"` on the `<picture>` element and `<source>` elements, but browser lazy loading failed. Where must `loading="lazy"` be placed in responsive picture markup? | pass→pass | 11,926 | 11,951 | +0% | 1 | 1 | 0% | 1,273 | 1,644 | +29% | 0 | 0 | — |
▸case-16 When lazy loading heavy data tables, displaying a blank container causes users to think the app froze. Describe how to mark up a placeholder skeleton container during pending lazy states to communicate busy status to screen readers. | pass→pass | 16,077 | 15,948 | -1% | 1 | 1 | 0% | 2,684 | 2,902 | +8% | 0 | 0 | — |
▸case-17 Our design system ships dynamic Web Components. Instead of loading all custom elements in the initial main script bundle, we want to fetch the element bundle and register it with `customElements.define()` only when rendered. How should element registration status be checked before defining? | pass→pass | 19,691 | 21,028 | +7% | 1 | 1 | 0% | 2,655 | 3,190 | +20% | 0 | 0 | — |
▸case-18 When lazy loading dynamic components using ES dynamic `import()`, Webpack generates arbitrary numeric chunk files like `1.js`. How can developers annotate dynamic import statements to enforce descriptive chunk output filenames? | pass→pass | 9,316 | 9,936 | +7% | 1 | 1 | 0% | 1,600 | 2,071 | +29% | 0 | 0 | — |
▸case-19 In a Next.js App Router application, we have an interactive heavy chart client component. To prevent including chart dependencies in the initial server render and defer bundle execution, how should `next/dynamic` be configured to disable SSR? | pass→pass | 13,896 | 16,720 | +20% | 1 | 1 | 0% | 1,522 | 2,551 | +68% | 0 | 0 | — |
▸case-20 We need to build a 3-column responsive product card layout using CSS Grid with media queries for mobile devices. No lazy loading or deferred script execution is involved. Provide the CSS styles for this responsive grid layout. | pass→pass | 17,180 | 19,654 | +14% | 1 | 1 | 0% | 2,809 | 3,619 | +29% | 0 | 0 | — |
▸case-21 Create an Express.js route handler `/api/v1/products` that queries a PostgreSQL database using `pg` node package and returns a JSON list of products with pagination query parameters `page` and `limit`. This is a backend API route. | pass→pass | 16,481 | 18,089 | +10% | 1 | 1 | 0% | 2,389 | 3,166 | +33% | 0 | 0 | — |
▸case-22 Write a frontend utility function in TypeScript that takes a string password input and returns a SHA-256 digest using the browser's native Web Crypto API (`window.crypto.subtle.digest`). This is a standard cryptographic utility. | pass→pass | 14,218 | 9,173 | -35% | 1 | 1 | 0% | 1,719 | 1,747 | +2% | 0 | 0 | — |