Introduce skeleton preview of profile page

src/components/_mixins/SkeletonMixin.vue

@@ -0,0 +1,23 @@
+<script>
+export default {
+  mounted() {
+    this.$nextTick(() => {
+      this.nextSkeletonHeight = getComputedStyle(this.$el).getPropertyValue(
+        'height',
+      );
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      if (this.skeleton) {
+        this.$el.style.height = this.nextSkeletonHeight;
+      } else {
+        this.$el.style.height = null;
+        this.nextSkeletonHeight = getComputedStyle(this.$el).getPropertyValue(
+          'height',
+        );
+      }
+    });
+  },
+};
+</script>

src/components/profile/Profile.vue

@@ -1,5 +1,13 @@
 <template>
-  <main class="profile">
+  <main v-if="skeleton" class="profile profile--skeleton">
+    <div class="profile__section" aria-hidden="true">
+      <ViewPersonalInfo :skeleton="true" />
+    </div>
+    <ProfileNav :links="profileNav" aria-hidden="true"></ProfileNav>
+    <ProfileSection :skeleton="true" aria-hidden="true" />
+    <p class="visually-hidden">{{ fluent('loading-profile') }}</p>
+  </main>
+  <main v-else class="profile">
     <div
       :class="
         'profile__section' +
@@ -287,6 +295,7 @@ export default {
     primaryUsername: Object,
     viewAs: Boolean,
     allowStaffOnlyFields: Boolean,
+    skeleton: Boolean,
   },
   mixins: [AccountsMixin],
   components: {
@@ -452,4 +461,11 @@ export default {
     top: -7em;
   }
 }
+
+.profile__section--skeleton .profile__section-header h2 {
+  height: 1.4em;
+}
+.profile__section--skeleton p {
+  height: 1.4em;
+}
 </style>

src/components/profile/ProfilePreview.vue

@@ -1,5 +1,31 @@
 <template>
-  <div class="profile-preview" ref="profilePreviewElement" tabindex="-1">
+  <div v-if="skeleton" class="profile-preview profile-preview__skeleton">
+    <div class="profile-preview__image">
+      <div
+        class="button button--icon-only button--secondary profile-preview__close"
+      >
+        <svg
+          aria-hidden="true"
+          role="presentation"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          focusable="false"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </div>
+      <UserPicture :size="100" :avatar="{ picture: 'empty:' }" />
+    </div>
+  </div>
+  <div v-else class="profile-preview" ref="profilePreviewElement" tabindex="-1">
     <button
       v-if="desktopView"
       @click="$emit('close')"
@@ -66,6 +92,7 @@
 
 <script>
 import CompanyMixin from '@/components/_mixins/CompanyMixin.vue';
+import SkeletonMixin from '@/components/_mixins/SkeletonMixin.vue';
 import ContactMe from '@/components/ui/ContactMe.vue';
 import UserPicture from '@/components/ui/UserPicture.vue';
 import ProfileDescription from './ProfileDescription.vue';
@@ -75,7 +102,7 @@ import ProfileTeamLocation from './ProfileTeamLocation.vue';
 import Icon from '@/components/ui/Icon.vue';
 
 export default {
-  mixins: [CompanyMixin],
+  mixins: [CompanyMixin, SkeletonMixin],
   name: 'ProfilePreview',
   props: {
     staffInformation: Object,
@@ -93,6 +120,7 @@ export default {
     uris: Object,
     userId: Object,
     desktopView: Boolean,
+    skeleton: Boolean,
   },
   components: {
     ContactMe,
@@ -127,6 +155,10 @@ export default {
   position: relative;
   border-radius: var(--cardRadius);
 }
+.profile-preview__skeleton {
+  width: 30em;
+  height: 40em;
+}
 .profile-preview .profile__name {
   display: block;
   margin-bottom: 0.5em;

src/components/profile/ProfileSection.vue

@@ -50,6 +50,7 @@ export default {
     messageNoLdap: String,
     isLdap: Boolean,
     editing: Boolean,
+    skeleton: Boolean,
   },
   components: { EditButton, EmptyCard, PanelSection },
   computed: {
@@ -58,6 +59,7 @@ export default {
         profile__section: true,
         'profile__section--editing': this.editing,
         'profile__section--disabled': !this.editing && this.empty,
+        'profile__section--skeleton': this.skeleton,
       };
     },
     needsLdap() {

src/components/profile/view/ViewPersonalInfo.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="profile__intro">
+  <div v-if="skeleton" class="profile__intro">
+    <div class="profile__intro-photo">
+      <div class="profile__headshot">
+        <UserPicture :avatar="{ picture: 'empty:' }" :size="264"></UserPicture>
+      </div>
+    </div>
+  </div>
+  <div v-else class="profile__intro">
     <EditButton
       v-if="userOnOwnProfile && editable"
       :sendTo="{
@@ -99,6 +106,7 @@
 <script>
 import CompanyMixin from '@/components/_mixins/CompanyMixin.vue';
 import OfficesMixin from '@/components/_mixins/OfficesMixin.vue';
+import SkeletonMixin from '@/components/_mixins/SkeletonMixin.vue';
 import ContactMe from '@/components/ui/ContactMe.vue';
 import EditButton from '@/components/ui/EditButton.vue';
 import Icon from '@/components/ui/Icon.vue';
@@ -135,6 +143,7 @@ export default {
     userOnOwnProfile: Boolean,
     editable: Boolean,
     accessInformation: Object,
+    skeleton: Boolean,
   },
   components: {
     ContactMe,

src/locales/en-US/strings.ftl

@@ -99,7 +99,7 @@ onboarding_modal_username = Getting started
   .staff_1 =  As a member of Mozilla staff, you were automatically assigned a username when we created your profile. You haven’t changed it so far. Due to the platform now being publicly accessible, we would like you to either choose a username to your liking or confirm the newly auto-generated one below.
   .staff_2 = Your username is <strong>publicly visible</strong> and included in your profile URL.
   .paragraph_1 = Before you explore your profile, we would like you to choose a username or confirm the one we generated for you.<br /> Your username is <strong>publicly visible</strong> and included in your profile URL.
-  .paragraph_2 = <strong>Pro tip:</strong> Use the same username across systems for easy discovery (e.g. Slack, Discourse). 
+  .paragraph_2 = <strong>Pro tip:</strong> Use the same username across systems for easy discovery (e.g. Slack, Discourse).
   .restriction = Minimum length is 3, allowed characters are: a-z, 0-9, _ and -.
   .username_exists = Username {$username} exists already, please choose another username.
   .username_invalid_chars = Username must not contain spaces or uppercase characters
@@ -145,6 +145,8 @@ orgchart_full-profile = View full profile
 
 profile = Profile
 
+profile_loading = Loading profile…
+
 profile_preview = Preview As
 profile_preview_active = Previewing profile as
 profile_preview_myself = Myself
@@ -438,11 +440,11 @@ access-group_request = Request Invitation
 access-group_request-cancel = Cancel Request
 access-group-nav-bar = Access Groups
 access-group_membership-management = Membership Management
-  .mozillians = <strong>{$mozilliansCount}</strong> {$mozilliansCount -> 
+  .mozillians = <strong>{$mozilliansCount}</strong> {$mozilliansCount ->
                    [one] mozillian
                    *[other] mozillians
                 }
-  .members-will = <strong>{$membersCount}</strong> {$membersCount -> 
+  .members-will = <strong>{$membersCount}</strong> {$membersCount ->
                    [one] member
                    *[other] members
                 } will

src/pages/PageOrgchart.vue

@@ -41,11 +41,13 @@
         :query="previewProfileQuery"
         :variables="{ username }"
         :tag="null"
+        :notifyOnNetworkStatusChange="true"
       >
-        <template slot-scope="{ result: { data } }">
+        <template slot-scope="{ result: { loading, data } }">
           <div class="org-chart__preview">
+            <ProfilePreview v-if="loading" :skeleton="true"></ProfilePreview>
             <ProfilePreview
-              v-if="data && desktopView"
+              v-else-if="data && desktopView"
               v-bind="data.profile"
               :desktopView="desktopView"
               @close="closeProfile"
@@ -490,7 +492,7 @@ export default {
   .org-chart {
     padding: 2em;
     display: grid;
-    grid-template-columns: minmax(25em, 45em) auto;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto 1fr;
     align-items: start;
     grid-gap: 2em;
@@ -509,6 +511,7 @@ export default {
   .org-chart__preview {
     grid-row: 1 / 2;
     grid-column: 2 / 3;
+    max-width: 30em;
   }
 }
 @media (min-height: 36em) and (min-width: 57.5em) {
@@ -521,7 +524,6 @@ export default {
 
 .org-root {
   width: 100%;
-  max-width: 45em;
   background-image: linear-gradient(
     var(--gray-10) 0,
     var(--gray-10) 50%,

src/pages/PageProfile.vue

@@ -12,7 +12,7 @@
         :viewAsFilter="viewAs"
         :viewAsActive="variables.viewAsActive"
       ></PreviewAs>
-      <LoadingSpinner v-if="loading"></LoadingSpinner>
+      <Profile v-if="loading" :skeleton="true" />
       <template v-else-if="data && data.profile !== null">
         <Profile
           v-bind="data.profile"