MOBILE-3631 core: Add avatar placeholder

src/addons/messages/pages/contacts-35/contacts.page.ts

@@ -255,6 +255,7 @@ export class AddonMessagesContacts35Page implements OnInit, OnDestroy {
         const splitViewLoaded = CoreNavigator.instance.isSplitViewOutletLoaded('**/messages/contacts-35/discussion');
         const path = (splitViewLoaded ? '../' : '') + 'discussion';
 
+        // @todo Check why this is failing on ngInit.
         CoreNavigator.instance.navigate(path, { params });
     }
 

src/addons/messages/pages/discussion/discussion.page.ts

@@ -155,7 +155,8 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
 
         // Recalculate footer position when keyboard is shown or hidden.
         this.keyboardObserver = CoreEvents.on(CoreEvents.KEYBOARD_CHANGE, () => {
-            // @todo this.content.resize();
+            // @todo probably not needed.
+            // this.content.resize();
         });
     }
 
@@ -455,7 +456,8 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
         });
 
         // Call resize to recalculate the dimensions.
-        // @todo this.content!.resize();
+        // @todo probably not needed.
+        // this.content!.resize();
 
         // If we received a new message while using group messaging, force mark messages as read.
         const last = this.messages[this.messages.length - 1];
@@ -1072,7 +1074,7 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
      * Content or scroll has been resized. For content, only call it if it's been added on top.
      */
     resizeContent(): void {
-        /* @todo
+        /* @todo probably not needed.
         let top = this.content!.getContentDimensions().scrollTop;
         // @todo this.content.resize();
 

src/core/components/user-avatar/user-avatar.scss

@@ -5,6 +5,26 @@
         border-radius: 50%;
         width: var(--core-avatar-size);
         height: var(--core-avatar-size);
+        max-width: var(--core-avatar-size);
+        max-height: var(--core-avatar-size);
+    }
+    img[core-external-content]:not([src]),
+    img[core-external-content][src=""] {
+        visibility: visible;
+        display: inline-block;
+        position: relative;
+        &:after {
+            border-radius: 50%;
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('/assets/img/user-avatar.png');
+            background-size: contain;
+            content: "";
+        }
     }
     &.core-bar-button-image img {
         padding: 0;

src/theme/app.scss

@@ -295,6 +295,16 @@ ion-avatar ion-img, ion-avatar img {
     background-color: var(--gray-light);
 }
 
+// Wait to load before showing the image.
+img[core-external-content]:not([src]) {
+    visibility: hidden;
+}
+img[alt] {
+    text-indent: -999999px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
 // Activity modules
 .core-module-icon {
     width: auto;