feat(select): Add skeleton state

Author: youda97

src/select/select.component.ts

@@ -28,13 +28,15 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 	selector: "ibm-select",
 	template: `
 		<div class="bx--form-item">
+			<label *ngIf="skeleton" [attr.for]="id" class="bx--label bx--skeleton"></label>
 			<div
 				[ngClass]="{
 					'bx--select--inline': display === 'inline',
-					'bx--select--light': theme === 'light'
+					'bx--select--light': theme === 'light',
+					'bx--skeleton': skeleton
 				}"
 				class="bx--select">
-				<label [attr.for]="id" class="bx--label">{{label}}</label>
+				<label *ngIf="!skeleton" [attr.for]="id" class="bx--label">{{label}}</label>
 				<select
 					#select
 					[attr.id]="id"
@@ -43,7 +45,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 					class="bx--select-input">
 					<ng-content></ng-content>
 				</select>
-				<svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
+				<svg *ngIf="!skeleton" class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
 				<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
 				</svg>
 			</div>
@@ -79,6 +81,10 @@ export class Select implements ControlValueAccessor {
 	 * Set to true to disable component.
 	 */
 	@Input() disabled = false;
+	/**
+	 * Set to true for a loading select.
+	 */
+	@Input() skeleton = false;
 	/**
 	 * `light` or `dark` select theme
 	 */

src/select/select.stories.ts

@@ -44,4 +44,11 @@ storiesOf("Select", module).addDecorator(
 		props: {
 			model: "default"
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+		<div style="width: 300px">
+			<ibm-select skeleton="true"></ibm-select>
+		</div>
+		`
 	}));