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.

TypeScript code blocks include examples of how to implement, override and components within the theme. You can create page with the UI Editor to make your page compatible with theming and then you can implement themable components programmatically. Once the page is created with the UI Editor, it generates a class under scripts/generated/pages. You can then extend that class with the following TypeScript classes.

Shimmering On Android

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

TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import ShimmerFlexLayout = require('sf-core/ui/shimmerflexlayout');
import ImageView = require("sf-core/ui/imageview");
import componentContextPatch from '@smartface/contx/lib/smartface/componentContextPatch';
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
myShimmerFlexLayout: ShimmerFlexLayout;
imageViews: ImageView[] = new Array<ImageView>();
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow: () => void) {
const { headerBar } = this;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
setTimeout(() => {
this.myShimmerFlexLayout.stopShimmering();
this.myShimmerFlexLayout.baseAlpha = 1;
this.myShimmerFlexLayout.android.build(ShimmerFlexLayout.Android.Shimmer.AlphaHighlight);
for (let index = 0; index < this.imageViews.length; index++) {
this.imageViews[index].loadFromUrl({ url: "https://picsum.photos/200/300/?image=10" + index });
}
}, 4000);
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
this.flex = new FlexLayout();
componentContextPatch(this.flex, "flex");
this.flex.dispatch({
type: "updateUserStyle",
userStyle: {
width: 350,
height: 750,
marginLeft: 20,
flexProps: {
positionType: "ABSOLUTE",
flexDirection: "ROW",
flexWrap: "WRAP",
alignContent: "AUTO"
}
}
});
for (let index = 1; index <= 6; index++) {
let imageViewName = 'img' + index;
this[imageViewName] = new ImageView();
this.flex.addChild(this[imageViewName], imageViewName, ".sf-imageView", {
height: 150,
width: 150,
marginLeft: 20,
marginBottom: 20,
marginTop: 10,
backgroundColor: "#a1a1a1",
imageFillType: "ASPECTFILL"
});
this.imageViews.push(this[imageViewName]);
}
this.myShimmerFlexLayout = new ShimmerFlexLayout();
this.layout.addChild(this.myShimmerFlexLayout, "myShimmerFlexLayout", ".sf-shimmerFlexLayout", {
height: 500,
width: 400,
baseAlpha: 0.5,
pauseDuration: 500,
android: {
highlightAlpha: 1
},
ios: {
animationAlpha: 0.2
},
});
this.myShimmerFlexLayout.android.build(ShimmerFlexLayout.Android.Shimmer.AlphaHighlight);
this.myShimmerFlexLayout.contentLayout = this.flex;
this.myShimmerFlexLayout.startShimmering();
this.dispatch({
type: "updateUserStyle",
userStyle: {
flexProps: {
paddingTop: 0,
paddingLeft: 0,
paddingBottom: 0,
paddingRight: 0
}
}
})
}
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.