From 6694004e30ab7d172ca21b081d7ef06cce50a6e7 Mon Sep 17 00:00:00 2001
From: Vitalie Braga <v-vibr@microsoft.com>
Date: Tue, 10 Apr 2018 12:56:23 -0700
Subject: [PATCH 1/2] Changes the example to use enableShimmer of the
 DetailsList.

---
 .../examples/Shimmer.Application.Example.tsx  | 53 +++++++++++--------
 .../Shimmer/examples/Shimmer.Example.scss     |  8 +++
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/packages/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx b/packages/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx
index 8f3a33f1ce9331..1b5c24b355a522 100644
--- a/packages/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx
+++ b/packages/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx
@@ -12,7 +12,9 @@ import {
   DetailsList,
   buildColumns,
   SelectionMode,
-  Toggle
+  Toggle,
+  IDetailsRowProps,
+  DetailsRow
 } from 'office-ui-fabric-react';
 import { Shimmer } from 'experiments/lib/Shimmer';
 import './Shimmer.Example.scss';
@@ -98,21 +100,23 @@ export class ShimmerApplicationExample extends BaseComponent<{}, IShimmerApplica
     return (
       <div>
         <div className='shimmerExample-toggleButtons'>
-          <Toggle
-            label='Enable Modal Selection'
-            checked={ isModalSelection }
-            onChanged={ this._onChangeModalSelection }
-            onText='Modal'
-            offText='Normal'
-          />
-          <Toggle
-            label='Enable Compact Mode'
-            checked={ isCompactMode }
-            onChanged={ this._onChangeCompactMode }
-            onText='Compact'
-            offText='Normal'
-          />
-          <p>Toggle the Load data switch to start async simulation.</p>
+          <div className='shimmerExample-flexGroup'>
+            <Toggle
+              label='Enable Modal Selection'
+              checked={ isModalSelection }
+              onChanged={ this._onChangeModalSelection }
+              onText='Modal'
+              offText='Normal'
+            />
+            <Toggle
+              label='Enable Compact Mode'
+              checked={ isCompactMode }
+              onChanged={ this._onChangeCompactMode }
+              onText='Compact'
+              offText='Normal'
+            />
+          </div>
+          <span>Toggle the Load data switch to start async simulation.</span>
           <Toggle
             label='Load data switch'
             checked={ isDataLoaded }
@@ -130,6 +134,7 @@ export class ShimmerApplicationExample extends BaseComponent<{}, IShimmerApplica
             selectionMode={ this.state.isModalSelection ? SelectionMode.multiple : SelectionMode.none }
             onRenderItemColumn={ this._onRenderItemColumn }
             onRenderMissingItem={ this._onRenderMissingItem }
+            enableShimmer={ true }
             listProps={ { renderedWindowsAhead: 0, renderedWindowsBehind: 0 } }
           />
         </div>
@@ -137,12 +142,16 @@ export class ShimmerApplicationExample extends BaseComponent<{}, IShimmerApplica
     );
   }
 
-  private _onRenderMissingItem = (index: number): React.ReactNode => {
+  private _onRenderMissingItem = (index: number, rowProps: IDetailsRowProps): React.ReactNode => {
     const { isDataLoaded } = this.state;
     isDataLoaded && this._onDataMiss(index as number);
 
     return (
-      <Shimmer />
+      <Shimmer
+        isBaseStyle={ true }
+      >
+        <DetailsRow { ...rowProps } shimmer={ true } />
+      </Shimmer>
     );
   }
 
@@ -171,15 +180,15 @@ export class ShimmerApplicationExample extends BaseComponent<{}, IShimmerApplica
         item.thumbnail = randomFileType.url;
       });
     }
-    let { isDataLoaded, items } = this.state;
-    isDataLoaded = checked;
-    if (isDataLoaded) {
+
+    let items: IItem[];
+    if (checked) {
       items = _items.slice(0, ITEMS_BATCH_SIZE).concat(new Array(ITEMS_COUNT - ITEMS_BATCH_SIZE));
     } else {
       items = new Array();
     }
     this.setState({
-      isDataLoaded: isDataLoaded,
+      isDataLoaded: checked,
       items: items
     });
   }
diff --git a/packages/experiments/src/components/Shimmer/examples/Shimmer.Example.scss b/packages/experiments/src/components/Shimmer/examples/Shimmer.Example.scss
index 501e970ec958c4..5352eda584c45b 100644
--- a/packages/experiments/src/components/Shimmer/examples/Shimmer.Example.scss
+++ b/packages/experiments/src/components/Shimmer/examples/Shimmer.Example.scss
@@ -14,4 +14,12 @@
     text-decoration: underline;
     cursor: pointer;
   }
+
+  .shimmerExample-flexGroup {
+    display: flex;
+
+    .ms-Toggle {
+      margin-right: 30px;
+    }
+  }
 }
\ No newline at end of file

From 9d55dd85e4ccc2cf8e1b17475c930e5aa432d262 Mon Sep 17 00:00:00 2001
From: Vitalie Braga <v-vibr@microsoft.com>
Date: Tue, 10 Apr 2018 12:59:32 -0700
Subject: [PATCH 2/2] Rush change log.

---
 ...ailsList-Application_Example_2018-04-10-19-59.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/@uifabric/experiments/v-vibr-Shimmer-DetailsList-Application_Example_2018-04-10-19-59.json

diff --git a/common/changes/@uifabric/experiments/v-vibr-Shimmer-DetailsList-Application_Example_2018-04-10-19-59.json b/common/changes/@uifabric/experiments/v-vibr-Shimmer-DetailsList-Application_Example_2018-04-10-19-59.json
new file mode 100644
index 00000000000000..5d69af947abf5c
--- /dev/null
+++ b/common/changes/@uifabric/experiments/v-vibr-Shimmer-DetailsList-Application_Example_2018-04-10-19-59.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Shimmer: Application example modified to reflect changes in DetailsList",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "v-vibr@microsoft.com"
+}
\ No newline at end of file