@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
74 lines • 7.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Link_1 = require("office-ui-fabric-react/lib/Link");
var Shimmer_Basic_Example_1 = require("./examples/Shimmer.Basic.Example");
var Shimmer_CustomElements_Example_1 = require("./examples/Shimmer.CustomElements.Example");
var Shimmer_LoadData_Example_1 = require("./examples/Shimmer.LoadData.Example");
var Shimmer_Application_Example_1 = require("./examples/Shimmer.Application.Example");
var Shimmer_Styling_Example_1 = require("./examples/Shimmer.Styling.Example");
var ShimmerBasicExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Shimmer/examples/Shimmer.Basic.Example.tsx');
var ShimmerCustomExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Shimmer/examples/Shimmer.CustomElements.Example.tsx');
var ShimmerStylingExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Shimmer/examples/Shimmer.Styling.Example.tsx');
var ShimmerLoadDataExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Shimmer/examples/Shimmer.LoadData.Example.tsx');
var ShimmerApplicationExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx');
var ShimmerPage = /** @class */ (function (_super) {
tslib_1.__extends(ShimmerPage, _super);
function ShimmerPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ShimmerPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: "Shimmer", componentName: "ShimmerExample", exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Shimmer with basic elements using the "shimmerElements" prop', code: ShimmerBasicExampleCode },
React.createElement(Shimmer_Basic_Example_1.ShimmerBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Shimmer with custom elements using the "customElementsGroup" prop', code: ShimmerCustomExampleCode },
React.createElement(Shimmer_CustomElements_Example_1.ShimmerCustomElementsExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: "Shimmer swapping with the content it replaces", code: ShimmerLoadDataExampleCode },
React.createElement(Shimmer_LoadData_Example_1.ShimmerLoadDataExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: "Details List with 500 items simulating loading data in async manner and having Shimmer enabled.", code: ShimmerApplicationExampleCode },
React.createElement(Shimmer_Application_Example_1.ShimmerApplicationExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Style override of shimmering wave using "styles" prop', code: ShimmerStylingExampleCode },
React.createElement(Shimmer_Styling_Example_1.ShimmerStylingExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [require('!raw-loader!@uifabric/experiments/src/components/Shimmer/Shimmer.types.ts')] }), overview: React.createElement("div", null,
React.createElement("p", null, "Shimmer is a temporary animation placeholder for when data from the service call takes time to get back and we don't want to block rendering the rest of the UI."),
React.createElement("p", null,
"When Shimmer is not wrapping the actual component to be rendered while data is fetching, ",
React.createElement("code", null, "shimmerElements"),
" or",
' ',
React.createElement("code", null, "customElementsGroup"),
" props should be used, and later just replace the Shimmer UI with the intended content. Otherwise, if smooth transition from Shimmer UI to content is wanted, wrap the content node with Shimmer tags and use",
' ',
React.createElement("code", null, "isDataLoaded"),
" prop to trigger the transition. For reference use the examples provided below."),
React.createElement("p", null,
"For cases when your application supports theming, Shimmer component is equiped with everything you need to just load the custom theme to the application, and as long as the color palette you provide has an overried for the two",
' ',
React.createElement(Link_1.Link, { href: "https://developer.microsoft.com/en-us/fabric#/styles/colors" },
React.createElement("code", null, "Fabric colors")),
' ',
"used in Shimmer, everything should be ok. If no theming is supported, then follow the example showing the use of the",
' ',
React.createElement("code", null, "styles"),
" prop.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use shimmer to help ease a UI transition when we know the service will potentially take a longer amount of time to retrieve the data."),
React.createElement("li", null, "Provide widths for each of the shimmer elements you used to build a skeleton layout looking as close as possible to real content it is replacing."),
React.createElement("li", null,
"Use ",
React.createElement("code", null, "isDataLoaded"),
" prop to trigger the transition once we have the data from the service. The Shimmer UI should Fade out while the real UI Fades In."),
React.createElement("li", null, "Use shimmer if you know the UI loading time is longer than 1 second."),
React.createElement("li", null, "Provide an ETA as quickly as possible to help the user understand that the system isn\u2019t broken if you use shimmer and the delay is longer than 10 seconds you must."),
React.createElement("li", null, "Provide shimmer designs for the breakpoints that your experience is supported in."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use on the same element both types of widths. It will always default to just one of them. See documentation below."),
React.createElement("li", null, "Build Shimmer UI should with a lot of details. Circles and rectangles are really as detailed as you want to get. Adding more detail will result in confusion once the UI loads."),
React.createElement("li", null, "Use shimmer if you are confident that the UI will take less than a second to load."),
React.createElement("li", null, "Use shimmer as a way to not make improvements in your code to improve performance."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return ShimmerPage;
}(React.Component));
exports.ShimmerPage = ShimmerPage;
//# sourceMappingURL=ShimmerPage.js.map