@livetiles/reach-components-react 0.4.0-preview.242 → 0.4.0-preview.243

package/index.esm2.js

@@ -87469,9 +87469,9 @@ var AuthenticationContextProvider = function AuthenticationContextProvider(_a) {
   }), void 0);
 };
 
-var version$1 = "0.4.0-preview.242";
-var buildId = "99092";
-var commitId = "2732235d26ab087e0a40021ab3be76ac1817fe11";
+var version$1 = "0.4.0-preview.243";
+var buildId = "99106";
+var commitId = "0748c0db44d2912396d18a14c3863581e5edacd6";
 var isCustomerBuild = false;
 var buildInfo = {
 	version: version$1,
@@ -135182,29 +135182,29 @@ var Operator = _styled.span.withConfig({
 var templateObject_1$5, templateObject_2$3;
 
 var ChannelFilter = function ChannelFilter(_a) {
-  var _b, _c, _d, _f, _g;
+  var _b, _c, _d, _f, _g, _h;
 
   var channels = _a.channels;
   var user = useCurrentUser();
   var formatMessage = useIntl().formatMessage;
   var allChannels = useContext(LazySubscriptionContext).channels;
 
-  var _h = useContext(FilterContext),
-      filter = _h.filter,
-      onChange = _h.onChange;
+  var _j = useContext(FilterContext),
+      filter = _j.filter,
+      onChange = _j.onChange;
 
-  var _j = useState$2(''),
-      channelSearchTerm = _j[0],
-      setChannelSearchTerm = _j[1];
+  var _k = useState$2(''),
+      channelSearchTerm = _k[0],
+      setChannelSearchTerm = _k[1];
 
-  var availableChannels = (_b = channels === null || channels === void 0 ? void 0 : channels.map(function (c) {
+  var availableChannels = (_c = (_b = channels === null || channels === void 0 ? void 0 : channels.map(function (c) {
     return allChannels.find(function (channel) {
       return channel.name === c;
     });
-  }).filter(function (c) {
+  })) === null || _b === void 0 ? void 0 : _b.filter(function (c) {
     return !!c;
-  })) !== null && _b !== void 0 ? _b : allChannels;
-  var channelsFromFilter = (_d = (_c = filter === null || filter === void 0 ? void 0 : filter.channels) === null || _c === void 0 ? void 0 : _c.items) !== null && _d !== void 0 ? _d : [];
+  })) !== null && _c !== void 0 ? _c : allChannels;
+  var channelsFromFilter = (_f = (_d = filter === null || filter === void 0 ? void 0 : filter.channels) === null || _d === void 0 ? void 0 : _d.items) !== null && _f !== void 0 ? _f : [];
   var channelsLength = channelsFromFilter.length;
   return jsxs(ToolbarFilterCalloutButton, __assign$g({
     isActive: channelsLength > 0,
@@ -135215,7 +135215,7 @@ var ChannelFilter = function ChannelFilter(_a) {
     buttonContent: getButtonContent()
   }, {
     children: [jsx$1(FilterLogicalOperators, {
-      selectedKey: (_g = (_f = filter === null || filter === void 0 ? void 0 : filter.channels) === null || _f === void 0 ? void 0 : _f.operator) === null || _g === void 0 ? void 0 : _g.toString(),
+      selectedKey: (_h = (_g = filter === null || filter === void 0 ? void 0 : filter.channels) === null || _g === void 0 ? void 0 : _g.operator) === null || _h === void 0 ? void 0 : _h.toString(),
       onChange: handleOperatorChange,
       ariaLabelResourceKey: "Lib.channelFilter.choiceGroupLabel"
     }, void 0), jsx$1(StyledTextField$1, {
@@ -135229,7 +135229,7 @@ var ChannelFilter = function ChannelFilter(_a) {
         return setChannelSearchTerm(value.toLowerCase());
       }
     }, void 0), jsx$1(Channels, {
-      children: availableChannels.filter(function (c) {
+      children: availableChannels === undefined ? jsx$1(ShimmerList$1, {}, void 0) : availableChannels === null || availableChannels === void 0 ? void 0 : availableChannels.filter(function (c) {
         var _a;
 
         return (_a = getChannelDisplayName(availableChannels, c, user)) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(channelSearchTerm);
@@ -135297,6 +135297,33 @@ var ChannelFilter = function ChannelFilter(_a) {
     }));
   }
 };
+
+var ShimmerList$1 = function ShimmerList() {
+  return jsx$1(Shimmer, {
+    customElementsGroup: Array.from(Array(8)).map(function (_, i) {
+      return jsx$1(ChannelShimmer, {}, i);
+    })
+  }, void 0);
+};
+
+var ChannelShimmer = function ChannelShimmer() {
+  return jsxs(Fragment, {
+    children: [jsx$1(ShimmerElementsGroup, {
+      shimmerElements: [{
+        type: ShimmerElementType.line,
+        height: 26,
+        width: '120px'
+      }]
+    }, void 0), jsx$1(ShimmerElementsGroup, {
+      shimmerElements: [{
+        type: ShimmerElementType.gap,
+        height: 10,
+        width: '100%'
+      }]
+    }, void 0)]
+  }, void 0);
+};
+
 var channelRowHeight = 36;
 var visibleChannels = 8;
 

package/index.umd.js

@@ -87327,9 +87327,9 @@
 	  }), void 0);
 	};
 
-	var version$1 = "0.4.0-preview.242";
-	var buildId = "99092";
-	var commitId = "2732235d26ab087e0a40021ab3be76ac1817fe11";
+	var version$1 = "0.4.0-preview.243";
+	var buildId = "99106";
+	var commitId = "0748c0db44d2912396d18a14c3863581e5edacd6";
 	var isCustomerBuild = false;
 	var buildInfo = {
 		version: version$1,
@@ -135056,29 +135056,29 @@
 	var templateObject_1$5, templateObject_2$3;
 
 	var ChannelFilter = function ChannelFilter(_a) {
-	  var _b, _c, _d, _f, _g;
+	  var _b, _c, _d, _f, _g, _h;
 
 	  var channels = _a.channels;
 	  var user = useCurrentUser();
 	  var formatMessage = useIntl().formatMessage;
 	  var allChannels = React$d.useContext(LazySubscriptionContext).channels;
 
-	  var _h = React$d.useContext(FilterContext),
-	      filter = _h.filter,
-	      onChange = _h.onChange;
+	  var _j = React$d.useContext(FilterContext),
+	      filter = _j.filter,
+	      onChange = _j.onChange;
 
-	  var _j = React$d.useState(''),
-	      channelSearchTerm = _j[0],
-	      setChannelSearchTerm = _j[1];
+	  var _k = React$d.useState(''),
+	      channelSearchTerm = _k[0],
+	      setChannelSearchTerm = _k[1];
 
-	  var availableChannels = (_b = channels === null || channels === void 0 ? void 0 : channels.map(function (c) {
+	  var availableChannels = (_c = (_b = channels === null || channels === void 0 ? void 0 : channels.map(function (c) {
 	    return allChannels.find(function (channel) {
 	      return channel.name === c;
 	    });
-	  }).filter(function (c) {
+	  })) === null || _b === void 0 ? void 0 : _b.filter(function (c) {
 	    return !!c;
-	  })) !== null && _b !== void 0 ? _b : allChannels;
-	  var channelsFromFilter = (_d = (_c = filter === null || filter === void 0 ? void 0 : filter.channels) === null || _c === void 0 ? void 0 : _c.items) !== null && _d !== void 0 ? _d : [];
+	  })) !== null && _c !== void 0 ? _c : allChannels;
+	  var channelsFromFilter = (_f = (_d = filter === null || filter === void 0 ? void 0 : filter.channels) === null || _d === void 0 ? void 0 : _d.items) !== null && _f !== void 0 ? _f : [];
 	  var channelsLength = channelsFromFilter.length;
 	  return jsxRuntime.jsxs(ToolbarFilterCalloutButton, __assign$g({
 	    isActive: channelsLength > 0,
@@ -135089,7 +135089,7 @@
 	    buttonContent: getButtonContent()
 	  }, {
 	    children: [jsxRuntime.jsx(FilterLogicalOperators, {
-	      selectedKey: (_g = (_f = filter === null || filter === void 0 ? void 0 : filter.channels) === null || _f === void 0 ? void 0 : _f.operator) === null || _g === void 0 ? void 0 : _g.toString(),
+	      selectedKey: (_h = (_g = filter === null || filter === void 0 ? void 0 : filter.channels) === null || _g === void 0 ? void 0 : _g.operator) === null || _h === void 0 ? void 0 : _h.toString(),
 	      onChange: handleOperatorChange,
 	      ariaLabelResourceKey: "Lib.channelFilter.choiceGroupLabel"
 	    }, void 0), jsxRuntime.jsx(StyledTextField$1, {
@@ -135103,7 +135103,7 @@
 	        return setChannelSearchTerm(value.toLowerCase());
 	      }
 	    }, void 0), jsxRuntime.jsx(Channels, {
-	      children: availableChannels.filter(function (c) {
+	      children: availableChannels === undefined ? jsxRuntime.jsx(ShimmerList$1, {}, void 0) : availableChannels === null || availableChannels === void 0 ? void 0 : availableChannels.filter(function (c) {
 	        var _a;
 
 	        return (_a = getChannelDisplayName(availableChannels, c, user)) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(channelSearchTerm);
@@ -135171,6 +135171,33 @@
 	    }));
 	  }
 	};
+
+	var ShimmerList$1 = function ShimmerList() {
+	  return jsxRuntime.jsx(officeUiFabricReact.Shimmer, {
+	    customElementsGroup: Array.from(Array(8)).map(function (_, i) {
+	      return jsxRuntime.jsx(ChannelShimmer, {}, i);
+	    })
+	  }, void 0);
+	};
+
+	var ChannelShimmer = function ChannelShimmer() {
+	  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+	    children: [jsxRuntime.jsx(officeUiFabricReact.ShimmerElementsGroup, {
+	      shimmerElements: [{
+	        type: officeUiFabricReact.ShimmerElementType.line,
+	        height: 26,
+	        width: '120px'
+	      }]
+	    }, void 0), jsxRuntime.jsx(officeUiFabricReact.ShimmerElementsGroup, {
+	      shimmerElements: [{
+	        type: officeUiFabricReact.ShimmerElementType.gap,
+	        height: 10,
+	        width: '100%'
+	      }]
+	    }, void 0)]
+	  }, void 0);
+	};
+
 	var channelRowHeight = 36;
 	var visibleChannels = 8;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livetiles/reach-components-react",
   "description": "Provides React components to consume LiveTiles Reach data",
-  "version": "0.4.0-preview.242",
+  "version": "0.4.0-preview.243",
   "peerDependencies": {
     "react": "^16.14.0 || ^17",
     "react-dom": "^16.14.0 || ^17",