Skeleton Screen

Skeleton Screen

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Jul 6, 2017 By: Kony Team
907 4 0 47
A skeleton screen can be used as an alternative to a spinner to indicate loading progress. It gives a visual cue that things are happening immediately- the skeleton of the page has been loaded and the information is gradually loading.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms

Features

  • Appears as if a screen is loading
  • Indicates users what to expect when screen loads
  • Gives better user experience than pre-loaders to indicate loading progress
  • Useful component when a screen takes a long time to load.

Prerequisites

  • Kony account
  • Kony Visualizer v8

The Skeleton Screen component lets you display an outline of a form before loading the actual form with information. The component populates a skeleton screen containing placeholders with animation until the actual form loads completely. Once the form is loaded, the skeleton screen disappears, and the actual form is rendered on the screen.

When an action takes relatively longer time to load a form, the skeleton screen improves the user experience. The Skeleton Screen component makes users of your app feel that your app is faster than what it actually is. To view an example of a skeleton screen, refer Facebook Skeleton Screen.

The following sections help you use the Skeleton Screen component in your app:

Prerequisites

Before you start using the Skeleton Screen component, ensure the following:

  1. Kony account
  2. Kony Visualizer V8

Importing the Skeleton Screen Component

Before you start importing the component to Kony Visualizer, you must download the component from the Kony Marketplace website. You can import the Marketplace components only into the apps that are of the Kony Reference Architecture type.

To import the Skeleton Screen component, do the following:

  1. Open your app project in Kony Visualizer.
  2. On the File menu, point to Import, and click Component. The Open dialog appears.
  3. Navigate to the location where you downloaded the component (zip file) on your computer, select the component, and click Open. The Import Marketplace Item dialog appears.
    skeletonscreen_import.png
  4. In the Library Name box, type a name if you want to create a new library. Otherwise, you can select the existing library name.
  5. In the Collection Name box, type a name if you want to create a new collection. Otherwise, you can select the existing collection name.
  6. In the Component Name box, the com.konymp.skeletonscreen name is displayed by default.

When you import a component, the component is imported to Visualizer's workspace, but not directly into your app. Thus, after you import the component, you must add the component to your app.

Adding a Skeleton Screen Component to your App

You can add a Skeleton Screen component to the FlexForm, FlexContainer, FlexScrollContainer, and Tab widgets.

To add a Skeleton Screen component:

  1. Open your app, and then open the form to which you want to add the component.
  2. On the My Libraries tab, select the defined Marketplace library from the drop-down list in which the component exists.
    library.png
  3. From the Collections tab, drag the component onto the form on the Visualizer canvas. The component is added to the form. You can also see a new element, com.konymp.skeletonscreen in the Components section on the Templates tab.
Note:

Ensure that the component is set to occupy 100 percent width of the device. You can achieve this by setting the width of the parent widget to 100 percent.

After adding a component to a form, you can configure the component the way you want it using the Look, Skin, and Action tabs on the Properties pane. Configuring the properties on the Properties pane is similar to configuring the properties of any widget in Kony Visualizer. For more information, refer Button Widget.

You can also see that a new tab, Component, is added on the Properties pane. The Component tab consists of properties. The properties are user-defined properties based on the use case of the component.

Note:

Changes made to the user defined properties are reflected only during run time, but not during design time (Visualizer Canvas).

You can also add a Skeleton Screen component dynamically. To do so,

  1. In the Project Explorer, on the Projects tab, click Controllers section to access the respective formController. Create a method and implement the code snippet similar to the sample code mentioned below
    /* creating a component's Object */
    var skeletonScreen = new com.konymp.skeletonscreen(
    {
    	"left":"0%",
    	"top":"0%",
    	"height":"100%",
    	"width":"100%",
    	"id":"skeletonScreen"
    }, {}, {});
    
    /* Setting the component's properties */
    skeletonScreen.numberOfRows=5; //If not mentioned, the default value (1) is applied.
    skeletonScreen.animationType="PULSATING";
    
    /*Adding the SkeletonScreen component to a Form*/
    this.view.add(skeletonScreen);
    
    /*Invoking the Skeleton Screen*/
    this.view.skeletonScreen.showSkeletonScreen();
    					
    /*Dismissing the skeleton Screen*/
    this.view.skeletonScreen.hideSkeletonScreen();

    In the code snippet, you can edit the properties of the component as per your requirement. For more information, see Setting Properties.

  2. Save the file.

Setting Properties

The properties provided on the Component tab allow you to customize the UI elements in the Skeleton Screen component. You can set the properties directly on the Component tab or by writing a JavaScript. This section provides information on how to set the properties by writing a JavaScript.

Number of Rows
Description: Specifies the number of rows to be generated for the skeleton screen.
Syntax: numberOfRows
Type: Number
Read/Write: Write
Remarks: The default value of the property is '1'. You can specify values ranging from 1 to 10. The property does not accept zero and negative numbers.
Changing the number of rows dynamically at run time results in unexpected behavior.
Example:
this.view.componentID.numberOfRows = 4;
Type of Animation
Description: Specifies the type of animation to be applied to the skeleton screen.
Syntax: animationType
Type: String
Read/Write: Write
Remarks: The default value of the property is "PULSATING". You can specify either of the following:
  • PULSATING: the skeleton screen renders with fade-in animation.
  • LOADING: the skeleton screen renders with scrolling-fade animation.

Once the Animation type is set , user cannot change it dynamically at any point in the component life cycle.

Example:
this.view.componentID.animationType= "LOADING";

APIs

The following APIs pertain to the Skeleton Screen component.

showSkeletonScreen

The API makes the skeleton screen visible on the screen.

Syntax
showSkeletonScreen()
Parameters

None

Return Value

None

Remarks

The showSkeletonScreen can’t be invoked in the preshow as it would be trying to invoke the animations before the widgets are displayed on the screen.

Example
this.view.componentID.showSkeletonScreen();
hideSkeletonScreen

The API hides the skeleton screen.

Syntax
hideSkeletonScreen()
Parameters

None

Return Value

None

Example
this.view.componentID.hideSkeletonScreen();

Known Issues

The showSkeletonScreen cannot be invoked in the preshow as it would be trying to invoke the animations before the widgets are displayed on the screen.