Skeleton – Symphonix

General

Portal actor can display a placeholder preview when it is loading.

View when loading	View after loading

Skeleton Global Settings

Specify the height and padding of the default shaded rectangle. width is either 100% or controlled by the grid.

Example 124. Code JSON

"skeleton": {
  "listView": {
    "withAction": {
      "height": "72px",
      "padding": "24px 12px"      
    },
    "noAction": {
      "height": "48px",
      "padding": "12px"      
    }
    
  },
  "queueView": {
    "height": "150px",
    "padding": "16px"    
  },
  "cardView": {
    "height": "300px",
    "padding": "16px"    
  },

Example 125. Code JSON

"detailView": {
  "large": {
    "height": "108.75px",
    "padding": "28px 12px 20px 12px"    
  },
  "medium": {
    "height": "104px",
    "padding": "28px 12px 20px 12px"    
  },
  "small": {
    "height": "101.625px",
    "padding": "28px 12px 20px 12px"    
  }
  
}
}

Skeleton Items

Each actor needs to specify how many skeleton rectangles are to be displayed.

Example 126. Code JSON

"appearance": {
    "skeleton": {
        "items": 3
    }
}

Skeleton Overridden

View when loading	View after loading

Example 127. Code JSON

"appearance": {
  "skeleton": {
    "items": 6,
    "style": {
      "padding": "12px",
      "height": "74px"      
    },
    "grid": {
      "sm": 6
      
    }
    
  }
}

Skeleton with `renderAs`

Example 128. Code JSON

"appearance": {
  "renderAs": [{
    "condition": "$client; == \"phone\"",
    "value": "card-view"    
  }, {
    "condition": "$client; != \"phone\"",
    "value": "list-view"    
  }],
  "skeleton": {
    "card-view": {
      "items": 10,
      "style": { "height": "160px" }
      
    },
    "list-view": {
      "items": 10
      
    }
    
  }
}

Skeleton with Conditional Entries

Example 129. Code JSON

"appearance": {
  "skeleton": [{
    "value": {
      "items": 3,
      "style": { "height": "120px" }
      
    },
    "condition": "$client; != \"phone\""    
  }, {
    "value": {
      "items": 3,
      "style": { "height": "178px" }
      
    },
    "condition": "$client; == \"phone\""    
  }]
}

Status

Release Available	Status	Framework Name
3.4	Current	TBC