diff --git a/common/changes/office-ui-fabric-react/zhiliu-fixSpinner_2018-02-28-22-55.json b/common/changes/office-ui-fabric-react/zhiliu-fixSpinner_2018-02-28-22-55.json
new file mode 100644
index 0000000000000..5113a04780d83
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/zhiliu-fixSpinner_2018-02-28-22-55.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "only mount spinner component when necessary",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "zhiliu@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss
index 2ea4a621299e3..8cd93d87f595c 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss
@@ -84,17 +84,6 @@ $groupHeader-ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
   }
 }
 
-.loading {
-  visibility: hidden;
-  opacity: 0;
-  transition: visibility $ms-animation-duration-3, opacity $ms-animation-duration-3;
-
-  &.loadingIsVisible {
-    visibility: visible;
-    opacity: 1;
-  }
-}
-
 .dropIcon {
   position: absolute;
   @include ms-left(-26px);
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
index 8483aa18b4428..a705cab90dc2d 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
@@ -121,15 +121,9 @@ export class GroupHeader extends BaseComponent<IGroupDividerProps, IGroupHeaderS
             <span className={ styles.headerCount }>({ group.count }{ group.hasMoreData && '+' })</span>
           </div>
 
-          <div
-            className={ css(
-              'ms-GroupHeader-loading',
-              styles.loading,
-              isLoadingVisible && ('is-loading ' + styles.loadingIsVisible)
-            ) }
-          >
+          { isLoadingVisible && (
             <Spinner label={ loadingText } />
-          </div>
+          ) }
 
         </FocusZone>
       </div>