Add skeleton loaders for About and Resume pages

[gocanto]

Summary

• add a dedicated skeleton placeholder for the About page connection section while the profile loads
• introduce a resume page skeleton component that mirrors the education, experience, and recommendations layout
• extend About and Resume page tests to cover the new loading skeletons

Testing

• make format
• npm run test (fails: vitest: not found)

---

https://chatgpt.com/codex/tasks/task_e_68df7dc06b78833399af18871cec0693

Summary by CodeRabbit

• New Features

  • Added loading skeletons to the About page’s “Let’s Connect” section, showing placeholders until profile data loads.
  • Introduced a comprehensive skeleton state on the Resume page, covering Education, Work Experience, and Recommendations while data loads.
  • Improves perceived performance and provides a clearer loading experience for users.

• Tests

  • Added test coverage for new loading states on About and Resume pages.
  • Implemented automatic mock cleanup between tests for more reliable test execution.

[coderabbitai]

Walkthrough

Adds skeleton loading UIs to About and Resume pages by introducing two new partial components and integrating them into conditional render flows. Updates tests to cover loading states and clear mocks after each test.

Changes

Cohort / File(s)	Summary of Changes
Pages: loading-state integration src/pages/AboutPage.vue, src/pages/ResumePage.vue	Import and render skeleton partials. Add v-else branches to show skeletons while profile/resume data is loading. Preserve existing content for loaded state.
Partials: new skeleton components src/partials/AboutConnectSkeletonPartial.vue, src/partials/ResumePageSkeletonPartial.vue	Add new Vue components rendering pulse-animated, aria-hidden skeleton UIs for About “Let’s Connect” and Resume sections (Education, Work Experience, Recommendations).
Tests: loading-state coverage and cleanup tests/pages/AboutPage.test.ts, tests/pages/ResumePage.test.ts	Add afterEach to clear mocks. Add tests asserting skeletons render during pending data fetches; stub services and partials as needed.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant AboutPage
  participant ProfileService as Profile Service
  participant AboutConnectSkeletonPartial as About Skeleton
  participant EmailLink as Email Link

  User->>AboutPage: Navigate
  AboutPage->>ProfileService: getProfile()
  Note right of AboutPage: While pending
  AboutPage-->>About Skeleton: Render v-else (loading)
  ProfileService-->>AboutPage: Profile data
  AboutPage-->>EmailLink: Render v-if (loaded)

Loading

sequenceDiagram
  autonumber
  actor User
  participant ResumePage
  participant ProfileService as Profile Service
  participant EduService as Education
  participant ExpService as Experience
  participant RecService as Recommendations
  participant ResumePageSkeletonPartial as Resume Skeleton
  participant ResumeContent as Resume Sections

  User->>ResumePage: Navigate
  par Fetch data
    ResumePage->>ProfileService: getProfile()
    ResumePage->>EduService: getEducation()
    ResumePage->>ExpService: getExperience()
    ResumePage->>RecService: getRecommendations()
  end
  Note right of ResumePage: While any pending
  ResumePage-->>ResumePageSkeletonPartial: Render v-if (loading)
  ProfileService-->>ResumePage: Profile data
  EduService-->>ResumePage: Education
  ExpService-->>ResumePage: Experience
  RecService-->>ResumePage: Recommendations
  ResumePage-->>ResumeContent: Render v-else (loaded)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat: Skeletons cards + Format #85 — Also adds skeleton loading UIs to About and Resume pages; overlaps in files and approach.
• [feature] Resumen page #3 — Modifies src/pages/ResumePage.vue rendering logic for resume sections; intersects with conditional rendering introduced here.

Suggested labels

testing

Poem

Thump-thump—my paws tap loading time,
Skeletons shimmer, a gentle rhyme.
While data burrows through its queue,
I nibble bytes and wait for view.
Then—poof!—the pages spring to life,
A hare’s delight, sans loading strife. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly describes the primary change in the pull request by highlighting the addition of skeleton loaders for both the About and Resume pages, which directly reflects the core content of the changeset. It is clear, specific, and concise, giving teammates an immediate understanding of the main feature introduced.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch gocanto/add-skeleton-loader-for-about-and-resume-pages-2025-10-03

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ecb889b and cab8adf.

📒 Files selected for processing (6)

• src/pages/AboutPage.vue (2 hunks)
• src/pages/ResumePage.vue (2 hunks)
• src/partials/AboutConnectSkeletonPartial.vue (1 hunks)
• src/partials/ResumePageSkeletonPartial.vue (1 hunks)
• tests/pages/AboutPage.test.ts (3 hunks)
• tests/pages/ResumePage.test.ts (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

tests/pages/AboutPage.test.ts (1)

src/stores/api/store.ts (1)

• getProfile (42-50)

tests/pages/ResumePage.test.ts (1)

src/stores/api/store.ts (4)

• getProfile (42-50)
• getExperience (51-59)
• getRecommendations (60-68)
• getEducation (96-104)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Summary of Changes

Hello @gocanto, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the user experience by integrating skeleton loaders into the About and Resume pages. These visual placeholders provide immediate feedback to users that content is being loaded, reducing perceived wait times and improving the overall responsiveness of the application. The changes involve adding new Vue components for the skeletons and updating the respective page components to display them conditionally, along with corresponding unit tests.

Highlights

• About Page Skeleton: Implemented a dedicated skeleton placeholder for the "About" page's connection section, which displays while the user's profile data is being loaded.
• Resume Page Skeleton: Introduced a comprehensive skeleton component for the "Resume" page, designed to mimic the layout of the education, experience, and recommendations sections during data fetching.
• Test Coverage: Extended existing tests for both the "About" and "Resume" pages to include assertions for the new loading skeletons, ensuring their correct rendering during data loading states.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Warning

Gemini encountered an error creating the review. You can try again by commenting /gemini review.