Show preview for header image in Card UI

Bug: 228305069
Change-Id: I5b74f6e285d0bb6bb6b6e8036b979881880953ba

core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/NewsResourceCard.kt

@@ -51,6 +51,8 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalInspectionMode
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.onClick
 import androidx.compose.ui.semantics.semantics
@@ -129,6 +131,12 @@ fun NewsResourceHeaderImage(
     headerImageUrl: String?
 ) {
     AsyncImage(
+        placeholder = if (LocalInspectionMode.current) {
+            painterResource(R.drawable.ic_placeholder_default)
+        } else {
+            // TODO b/228077205, show specific loading image visual
+            null
+        },
         modifier = Modifier
             .fillMaxWidth()
             .height(180.dp),

core-ui/src/main/res/drawable/ic_placeholder_default.xml

@@ -0,0 +1,47 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="364dp"
+    android:height="182dp"
+    android:viewportWidth="364"
+    android:viewportHeight="182">
+  <path
+      android:pathData="M0,0h364v182h-364z"
+      android:fillColor="#FCFCFC"/>
+  <path
+      android:pathData="M0,0h364v182h-364z"
+      android:fillColor="#7E7576"
+      android:fillAlpha="0.02"/>
+  <path
+      android:pathData="M0,0h364v182h-364z"
+      android:fillColor="#8C4190"
+      android:fillAlpha="0.11"/>
+  <path
+      android:pathData="M171,119L326,119A25,25 0,0 1,351 144L351,144A25,25 0,0 1,326 169L171,169A25,25 0,0 1,146 144L146,144A25,25 0,0 1,171 119z"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#5DD4FB"/>
+  <path
+      android:pathData="M156.023,33.705C154.247,37.971 153.333,42.543 153.333,47.161L188.666,47.161L224,47.161C224,42.543 223.086,37.971 221.31,33.705C219.535,29.44 216.932,25.563 213.651,22.298C210.37,19.033 206.475,16.444 202.188,14.677C197.901,12.91 193.307,12 188.667,12C184.026,12 179.432,12.91 175.145,14.677C170.858,16.444 166.963,19.033 163.682,22.298C160.401,25.563 157.798,29.44 156.023,33.705ZM153.333,47.161C153.333,51.778 152.409,56.35 150.615,60.616C148.821,64.882 146.192,68.758 142.877,72.023C139.562,75.288 135.627,77.878 131.296,79.645C126.965,81.412 122.323,82.322 117.635,82.322C112.947,82.322 108.305,81.412 103.974,79.645C99.643,77.878 95.708,75.288 92.393,72.023C89.078,68.758 86.449,64.882 84.655,60.616C82.861,56.35 81.938,51.778 81.938,47.161L117.635,47.161L153.333,47.161ZM12,47.161C12,42.543 12.904,37.971 14.661,33.705C16.419,29.439 18.994,25.563 22.242,22.298C25.489,19.033 29.344,16.443 33.586,14.676C37.829,12.909 42.376,12 46.968,12C51.561,12 56.108,12.909 60.351,14.676C64.593,16.443 68.448,19.033 71.695,22.298C74.942,25.563 77.518,29.439 79.276,33.705C81.033,37.971 81.938,42.543 81.938,47.161L46.968,47.161L12,47.161Z"
+      android:fillType="evenOdd">
+    <aapt:attr name="android:fillColor">
+      <gradient 
+          android:startY="11.9999"
+          android:startX="224"
+          android:endY="138.703"
+          android:endX="181.972"
+          android:type="linear">
+        <item android:offset="0" android:color="#FFFFA8FF"/>
+        <item android:offset="1" android:color="#FFFF8B5E"/>
+      </gradient>
+    </aapt:attr>
+  </path>
+  <path
+      android:strokeWidth="1"
+      android:pathData="M317.068,82.136L317.065,47.103L309.777,81.37L317.057,47.102L302.805,79.105L317.051,47.099L296.456,75.439L317.045,47.094L291.007,70.534L317.04,47.089L286.698,64.602L317.036,47.083L283.716,57.905L317.034,47.076L282.192,50.734L317.033,47.068L282.192,43.403L317.034,47.061L283.716,36.232L317.036,47.054L286.698,29.534L317.04,47.048L291.007,23.603L317.045,47.042L296.456,18.697L317.051,47.038L302.805,15.032L317.057,47.035L309.777,12.766L317.065,47.033L317.068,12L317.072,47.033L324.359,12.766L317.079,47.035L331.332,15.032L317.086,47.038L337.681,18.697L317.092,47.042L343.129,23.603L317.097,47.048L347.438,29.534L317.1,47.054L350.42,36.232L317.102,47.061L351.944,43.403L317.103,47.068L351.944,50.734L317.102,47.076L350.42,57.905L317.1,47.083L347.438,64.602L317.097,47.089L343.129,70.534L317.092,47.094L337.681,75.439L317.086,47.099L331.332,79.105L317.079,47.102L324.359,81.37L317.072,47.103L317.068,82.136Z"
+      android:strokeLineJoin="round"
+      android:fillColor="#00000000"
+      android:strokeColor="#FF8B5E"/>
+  <path
+      android:pathData="M38.205,170L38.975,170A26.205,26.205 89.056,0 0,65.18 143.795L65.18,143.795A26.205,26.205 89.056,0 0,38.975 117.59L38.205,117.59A26.205,26.205 89.056,0 0,12 143.795L12,143.795A26.205,26.205 89.056,0 0,38.205 170z"
+      android:fillColor="#FFA8FF"/>
+</vector>