ShimmerFlexLayout

API Reference: UI.ShimmerFlexLayout

ShimmerFlexLayout helps load a user interface gradually, a little at a time. While doing that, the labels and pictures have some gray colored placeholders on them with some moving gradient animation. Shimmer effect was created by Facebook to indicate a loading status, so instead of using ProgressBar or usual loader.

Shimmering On Android

Android includes build method which build the shimmer FlexLayout with given enum.

JavaScript
JavaScript
const ImageView = require("sf-core/ui/imageview");
const View = require("sf-core/ui/view");
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const Color = require('sf-core/ui/color');
const ShimmerFlexLayout = require('sf-core/ui/shimmerflexlayout');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.backgroundColor = Color.WHITE;
this.headerBar.leftItemEnabled = false;
}
});
const page = this;
var flex = new FlexLayout({
width: 350,
height: 750,
margin: 20,
positionType: FlexLayout.PositionType.ABSOLUTE,
flexDirection: FlexLayout.FlexDirection.ROW,
flexWrap: FlexLayout.FlexWrap.WRAP,
alignContent: FlexLayout.AlignContent.AUTO,
});
var img1 = new ImageView();
img1.height = 150;
img1.width = 150;
img1.marginLeft = 20;
img1.marginBottom = 20;
img1.marginTop = 20;
img1.backgroundColor = Color.LIGHTGRAY;
img1.imageFillType = ImageView.FillType.ASPECTFILL;
var img2 = new ImageView();
img2.height = 150;
img2.width = 150;
img2.marginLeft = 20;
img2.marginBottom = 20;
img2.marginTop = 20;
img2.backgroundColor = Color.LIGHTGRAY;
img2.imageFillType = ImageView.FillType.ASPECTFILL;
var img3 = new ImageView();
img3.backgroundColor = Color.LIGHTGRAY;
img3.height = 150;
img3.width = 150;
img3.marginLeft = 20;
img3.marginBottom = 20;
img3.imageFillType = ImageView.FillType.ASPECTFILL;
var img4 = new ImageView();
img4.height = 150;
img4.width = 150;
img4.marginLeft = 20;
img4.marginBottom = 20;
img4.backgroundColor = Color.LIGHTGRAY;
img4.imageFillType = ImageView.FillType.ASPECTFILL;
var img5 = new ImageView();
img5.backgroundColor = Color.LIGHTGRAY;
img5.height = 150;
img5.width = 150;
img5.marginLeft = 20;
img5.marginBottom = 20;
img5.imageFillType = ImageView.FillType.ASPECTFILL;
var img6 = new ImageView();
img6.height = 150;
img6.width = 150;
img6.marginLeft = 20;
img6.marginBottom = 20;
img6.backgroundColor = Color.LIGHTGRAY;
img6.imageFillType = ImageView.FillType.ASPECTFILL;
flex.addChild(img1);
flex.addChild(img2);
flex.addChild(img3);
flex.addChild(img4);
flex.addChild(img5);
flex.addChild(img6);
var shimmer = new ShimmerFlexLayout();
shimmer.height = 500;
shimmer.width = 400;
shimmer.ios.animationAlpha = 0.2;
shimmer.baseAlpha = 0.5;
shimmer.pauseDuration = 500;
shimmer.android.highlightAlpha = 1;
shimmer.android.build(ShimmerFlexLayout.Android.Shimmer.AlphaHighlight);
shimmer.contentLayout = flex;
page.layout.addChild(shimmer);
shimmer.startShimmering();
setTimeout(() => {
shimmer.stopShimmering();
shimmer.baseAlpha = 1;
shimmer.android.build(ShimmerFlexLayout.Android.Shimmer.AlphaHighlight);
img1.loadFromUrl({ url: "https://picsum.photos/200/300/?image=100" });
img2.loadFromUrl({ url: "https://picsum.photos/200/300/?image=101" });
img3.loadFromUrl({ url: "https://picsum.photos/200/300/?image=102" });
img4.loadFromUrl({ url: "https://picsum.photos/200/300/?image=103" });
img5.loadFromUrl({ url: "https://picsum.photos/200/300/?image=104" });
img6.loadFromUrl({ url: "https://picsum.photos/200/300/?image=106" });
}, 4000);
}
);
module.exports = Page1;

Reconstructing Components

After stopping shimmering effect; baseAlpha value must be set again and Android only builder function must be triggered.

Adding ShimmerFlexLayout Using UI Editor

Shimmer FlexLayouts can be created by using UI Editor all the way. When created it starts to shimmer from the very beginning, stopping and loading views need managed programmatically.

ShimmerFlexLayout properties can be added on UI Editor.