Add loading state to volunteer-headshot component

# Problem

The `volunteer-headshot` should have some loading states for async data.

## Subtasks
- [ ] Add a light gray background for the image as a placeholder, until loaded (keeping in mind that a user may have a transparent PNG, so the background shouldn't remain gray)
- [ ] Add a light gray rectangular area for the user's name as a placeholder, until loaded
- [ ] Add a light gray rectangular area for the user's role as a placeholder, until loaded

Locate the `volunteer-headshot` component and inspect how its image, name, and role render while async data is pending. Add loading placeholders for all three areas, ensuring the image background does not remain gray after a transparent PNG loads; done when each placeholder is replaced by the loaded content.

Written by the indexing model from the issue text.