feat(perf): add native lazy loading to Videos and Articles pages#175
Merged
michaelvolz merged 17 commits intomasterfrom Apr 1, 2026
Merged
Conversation
- Add loading="lazy" attribute to images with eager loading for first 6 items - Add fetchpriority and decoding=async attributes for performance - Add CSS containment and content-visibility to card component - Reduces initial page load by only loading visible images Relates to PRD-018
Add scoped error handling protocol for build infrastructure and toolchain errors. Protocol requires stopping, analyzing, and proposing solutions before proceeding. Relates to PRD-018
- Create reusable RaindropItemCard component in Features/Common/Components - Add Virtualize component to Videos and Articles pages for efficient rendering - Only render visible items (~12-16) instead of all items - Reduce DOM size and memory usage significantly - Add placeholder shimmer for non-visible items during scroll Performance improvements: - Initial render: ~15-20 DOM nodes vs 50+ items - Memory usage: Reduced by rendering only visible cards - Scroll performance: Smooth 60fps with virtualization Relates to PRD-018
- Add Product Requirements Document for performance optimization - Add detailed task list for implementation phases Relates to PRD-018
…oduction Expand test data from 5 to 25 items each for proper Virtualize testing: - videos.json: 25 videos from redmuffin.net/videos (IDs 123456800-123456824) - articles.json: 25 articles from redmuffin.net/articles (IDs 223456800-223456824) Production data extracted on 2025-03-31 includes: - Latest AI/ML tutorials and guides - .NET and Blazor conference talks - Developer tools and best practices - Real-world article links from various sources This enables proper testing of: - Virtualize component with large datasets - Lazy loading behavior - Scroll performance optimization - DOM size management Relates to PRD-018
Replace broken/empty image URLs with picsum.photos placeholders: - 20 articles now have working placeholder images - 3 articles kept empty to test fallback behavior - Makes local development testing easier Relates to PRD-018
picsum.photos has CORS/network issues in local dev. Switch to placehold.co for reliable placeholder images. Blue background with white text for visibility. Images labeled Article 1-20 for easy identification. Relates to PRD-018
Add package manager priority guideline to always use winget instead of Chocolatey unless explicitly instructed by the user.
Update apiVersion from 8.0 to 9.0 to match the project's .NET 9 target framework.
Restructure commits skill for better scannability: - Convert to protocol-style format with checkboxes - Merge Type Definitions into REFERENCE section - Remove redundant whitespace and prose - Preserve all information (113 lines vs 148, 24% reduction) - Add visual guardrails and revert test No functional changes, only formatting optimization.
Add Start.ps1 and Stop.ps1 to solution root for managing full-stack local development environment with Azure Static Web Apps proxy. Features: - Start.ps1: Launches Frontend, Backend, and SWA CLI - Default: Interactive mode with -NoExit (manual window management) - -Auto flag: Automated mode with PID tracking for cleanup - Stop.ps1: Kills exact processes tracked by Start.ps1 -Auto - Reads PIDs from .dev-session.pids - Cleans up orphaned child processes Removed scripts/Start.ps1 (relocated to root with enhancements). Usage: pwsh Start.ps1 -Auto # Start with tracking pwsh Stop.ps1 # Cleanup tracked processes Access: http://localhost:4280 (SWA Proxy)
Add comprehensive documentation for Start.ps1 and Stop.ps1 scripts to AGENTS.md under 'Agent Development Environment Scripts' section. Documents: - When to use Normal Dev mode vs Production Mode - Start.ps1 options (Interactive vs -Auto) - Stop.ps1 usage and cleanup behavior - Resource comparison between modes - Decision tree for choosing approach - Naming convention reminder (no new ALL CAPS files) Emphasizes that Production Mode testing (port 4280) should be used sparingly - only for final verification with real API data.
Prevent committing development environment PID tracking file created by Start.ps1 when using -Auto mode.
Optimized commits skill from 113 to 29 lines with agent-focused formatting: - Replaced verbose explanations with terse imperative commands - Added CHECK_ORDER section enforcing infrastructure-first commits (.gitignore and dependencies must be committed before features) - Removed all examples, prose, and human-focused documentation - Eliminated skip hooks option (hooks are mandatory) - Moved git hooks setup reference to README.md only - Preserved all rules: types, scopes, format, lock files, never/always BREAKING CHANGE: Skill no longer contains examples or skip hooks documentation.
Update generate-tasks skill to use new naming format: - Changed from: tasks-[number]-[feature-name].md - Changed to: PRD-[number]-[Feature-Name].Tasklist.md Uses dot notation for the Tasklist suffix and Title-Case for feature names.
Standardize all task list filenames to match new convention: - PRD-001 through PRD-015: -ToDo.md → .Tasklist.md - PRD-016 through PRD-018: tasks-*.md → PRD-*.Tasklist.md All 17 files renamed from old format to: PRD-[number]-[Feature-Name].Tasklist.md
Update skill description to explicitly mention trigger phrases including 'commit', 'committing', and variants without requiring 'git'. This addresses the issue where the skill wasn't triggering reliably when users simply said 'commit'.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Relates to PRD-018