Day 77: Fixing React Hydration & AWS SES Identities

Sometimes you architect a robust Serverless backend only to realize your frontend feels clunky and your automated emails look like spam. Today, I fixed two glaring UI/UX issues in my AI Financial Agent.

1. The React Avatar Flash I had a classic Data Hydration issue. When a user logged in, React synchronously rendered a default avatar, waited 200ms for DynamoDB to return the real profile picture URL, and then aggressively snapped the new image into place.

The fix? Stop rendering placeholders if you are in a loading state. I modified my React component to leave the avatar space as a clean white circle (!isAvatarLoading && ) while the network request resolves. Paired with localStorage caching, returning users get instant loads, and new users get a clean experience without jarring layout shifts.

1. The Robot Email in AWS SES My Python Lambda was sending daily reports via SES using Source="[email protected]". While technically correct, it looked completely untrustworthy in an inbox.

By changing the Boto3 payload to Source="DuroAI [email protected]", Gmail and Outlook now display "DuroAI" as the sender name. I also used this opportunity to wire up an Event-Driven Welcome Email. The moment a user's profile is saved for the first time in DynamoDB, the Lambda router intercepts the payload and triggers a custom SES welcome template.

Code for functionality, but architect for trust!