[Discovery] - Resize loading animations to fit spaces

Note: This issue is marked for discovery. It is open for discussion and not necessarily decided upon.

Describe the Current Behavior/Feature:

Currently, when loading the Contacts and Profiles/Documents pages, the animation is much smaller than the final content size.

Profile:

Contacts:

Messages:

Rationale:

The loading animations should more closely match the content that will eventually replace it. The difference in size between loading and loaded can be slightly strange. Using a "skeleton" design instead of a smaller linear box is a bit more professional in appearance and is what other apps use.

Proposed Changes:

Using the Material UI Skeleton component, refactor the loading animation to more closely match each page's size. For instance, the one for Documents would mimic a grid whereas the one for Profile would mimic both the profile card and grid beneath it.

Try refactoring using the existing LoadingAnimation component rather than creating a completely separate, new one.

Account for #637 if it ends up being added. That animation should remain linear and not a skeleton.

Possible Drawbacks:

This applies primarily for the desktop version. The updated mobile versions have not yet been completed.

Layouts for these pages may yet change (e.g. button placement may shift somewhat). However, the foundations are pretty solidified. The desktop version of Contacts will likely keep the large grid and the desktop version of Profile/Documents will likely keep the card and grid below.

This is a cosmetic change. Not a necessity but a "nice to have".

Start by locating the existing LoadingAnimation component and the loading states for Contacts, Profiles, and Documents. Review the Material UI Skeleton component and compare each loading layout with its final desktop content. Done means the pages use appropriately sized skeletons, while the animation for #637 remains linear; confirm the result at relevant mobile sizes as layouts allow.