UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

SkeletonView makes loading content beautiful

Add quick placeholders for images and text

Paul Hudson       @twostraws

You've made a gorgeous app design, and you've tested your code until you're sure it's bug free. But there's one thing you can't control, which is your user's network connection – and if you need to fetch and display remote data, that means users are going to stare at a blank screen for a few seconds until that data comes back.

Or at least that's what they would do without a beautiful new Swift project called SkeletonView from Juanpe Catalán. This was designed to control the display of your views while your network requests are still running, and automatically provide placeholder graphics for images and text that show something is loading.

Multiline text being replaced by SkeletonView

The process for enabling skeleton views couldn't be simpler:

  1. Import the library (yes, it supports Carthage and CocoaPods.)
  2. Mark any view as being skeletonable using someView.isSkeletonable = true
  3. Activate the skeleton drawing using someView.showSkeleton()

Helpfully, SkeletonView operates recursively: if you call it on a container view, e.g. view.showSkeleton() for your view controller's main view, then it will wind its way through your view hierarchy to make subviews skeletonable. Even better, you can add gentle animations from built-in defaults, or add your own – it's really customizable!

SkeletonView is available under the MIT license, so this is the kind of thing you can drop in and use to get immediate wins.

Link: SkeletonView.

BUILD THE ULTIMATE PORTFOLIO APP Most Swift tutorials help you solve one specific problem, but in my Ultimate Portfolio App series I show you how to get all the best practices into a single app: architecture, testing, performance, accessibility, localization, project organization, and so much more, all while building a SwiftUI app that works on iOS, macOS and watchOS.

Get it on Hacking with Swift+

Sponsor Hacking with Swift and reach the world's largest Swift community!

BUY OUR BOOKS
Buy Pro Swift Buy Pro SwiftUI Buy Swift Design Patterns Buy Testing Swift Buy Hacking with iOS Buy Swift Coding Challenges Buy Swift on Sundays Volume One Buy Server-Side Swift Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Advanced iOS Volume Three Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with macOS Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Beyond Code

Was this page useful? Let us know!

Average rating: 4.0/5

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.