do not mount spinner unless we need it (#4139)

* do not mount spinner unless we need it * change files
microsoft · Mar 1, 2018 · fdab0a0 · fdab0a0
1 parent 47663d0
commit fdab0a0
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 19 deletions.
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
@@ -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"
+}
diff --git 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
@@ -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>