txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Extend skeleton loaders to all 13 CV sections with structural fidelity

Browse Source 
Implemented comprehensive skeleton loaders for the entire CV curriculum,
providing smooth loading animations during language transitions across
all sections.

**Sections Implemented (13 total):**
- Header (title-badges + personal info)
- Education
- Skills Summary
- Experience (with company logos, descriptions, responsibilities)
- Awards (with logos, issuers, descriptions)
- Projects (with icons, descriptions, tech stacks)
- Courses (with icons, institutions, dates)
- Languages
- References
- Other Information
- Skills Sidebars (left and right)
- Footer

**Key Features:**
- Structural fidelity: Skeletons mirror exact HTML structure of actual content
- Each section has realistic placeholders (e.g., 3 experience items, 2 projects)
- Smooth CSS transitions with shimmer animations
- Zero layout shift
- Component-level architecture allows independent loading states

**Technical Implementation:**
- Modified all section templates in templates/partials/sections/
- Added .component-wrapper with .actual-content + .skeleton-content structure
- Extended skeleton.css with structural skeleton classes
- JavaScript event handlers in main.js already handle all sections via CSS cascade

**Testing:**
- Manual Playwright test: 13/13 component wrappers verified
- Automated test: 7/7 tests passing
- All skeleton loaders show during language switches
- No stuck loading states

**Documentation:**
- Updated tests/TEST-SUMMARY.md with all 13 sections
- Updated doc/2-MODERN-WEB-TECHNIQUES.md with comprehensive details
- Added structural fidelity table showing skeleton elements for each section

Files modified: 14 templates + CSS + 2 docs
This commit is contained in:
juanatsap
2025-11-18 20:18:28 +00:00
parent 8c0328357b
commit 2ca13a218e
14 changed files with 855 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/TEST-SUMMARY.md
+18 -2
View File
@@ -292,8 +292,8 @@ When adding tests:
**Philosophy**: Zero redundancy - Every test is essential and unique
### 12-skeleton-language-transitions.test.mjs
**Purpose**: Skeleton loader animations during language transitions
- ✅ Component wrapper structure (dual-state: actual + skeleton content)
**Purpose**: Skeleton loader animations during language transitions for ALL 13 curriculum sections
- ✅ Component wrapper structure (dual-state: actual + skeleton content) - **13 sections total**
- ✅ Skeleton CSS loaded (shimmer animation verified)
- ✅ First language switch (EN → ES) - Loading class added/removed
- ✅ Second language switch (ES → EN) - Consistent behavior
@@ -301,9 +301,25 @@ When adding tests:
- ✅ No stuck loading states (all containers clean after transition)
- ✅ JavaScript event handlers configured (languageSwitching flag)
**Sections with skeleton loaders (structural fidelity)**:
1. Header (title-badges + personal info)
2. Education
3. Skills Summary
4. Experience (with company logos, descriptions, responsibilities)
5. Awards (with logos, issuers, descriptions)
6. Projects (with icons, descriptions, tech stacks)
7. Courses (with icons, institutions, dates)
8. Languages
9. References
10. Other Information
11. Skills Sidebar (left) - Technical Skills
12. Skills Sidebar (right) - More Skills
13. Footer
**Implementation**: JavaScript event handlers in `static/js/main.js`
- `htmx:beforeRequest` - Adds `.loading` class to page containers
- `htmx:afterSettle` - Removes `.loading` class after swap completes (100ms delay)
- **Structural fidelity**: Each skeleton mirrors the exact structure of its actual content (logos, text lines, lists)
**Critical**: Migrated from hyperscript to JavaScript for reliable Playwright testing