Loading Empty States everywhere

I finally decided to write my first medium article.
And I finally encountered the perfect situation where to implement a Loading Empty States over a simple and sad Progress Bar.

They are everywhere by now, you might have noticed on Facebook’s wall, Google Search, LinkedIn…etc

Before we had the ProgressBar or LoadingSpinners, yes they get the work done, but they surprise the user with a whole content at once.

Also a lot of useless white space is shown to the user until the content is downloaded and ready to be displayed.

Finally we have Loading Empty States, gracefully welcoming the user onto a screen which is loading its content.
Main Boxes, Images, and text are roughly represented by flashing grey boxes.
Users have already an idea of what is going to be shown and the eyes won’t be surprised by huge amount of data appearing at once.

Here is LinkedIn’s Empty State loading and showing already posts and profile box

How good is this experience instead, placeholders hold the space where content will appear so user knows already where to expect data.

I’m an Android Developer at SafetyCulture and today I had the dilemma: a normal Progress Bar would have surprised the user distracting him/her on his/her journey while selecting a site for his/her audit.

When the Sites list is completely downloaded the original list gets pushed down and the white space gets replaced by a number of items.

With a Loading Empty State for each item the loading experience is less disturbing and the user doesn’t get distracted by the remote content coming in.

Custom View for Android

There are plenty of libraries out there to implement a similar Loading Empty State but I would suggest to just create a Custom View with a simple ValueAnimation on the ‘alpha’ property.

Having a Custom view allows you to create your own shape, a circle, an oval or a simple rounded rectangle. Once you’ve created your EmptyStateLoadingView just use it in a EmptyState Layout where you compose the screen that will be populated when the content is fully downloaded.
Here is my view:

class EmptyStateLoadingRow(context: Context?, attrs: AttributeSet?) : View(context, attrs)
{
   private val myPaint = Paint()
   private val rect = RectF()
   private val animator : ValueAnimator = ValueAnimator.ofFloat(1f, 0.5f)

   init
   {
      animator.duration = 300
      animator.addUpdateListener { alpha = it.animatedValue as Float}
      animator.repeatCount = ValueAnimator.INFINITE
      animator.repeatMode = ValueAnimator.REVERSE
      animator.start()
   }

   override fun onDraw(canvas: Canvas)
   {
      super.onDraw(canvas)

      rect.right = canvas.width.toFloat()
      rect.bottom = canvas.height.toFloat()

      myPaint.color = com.safetyculture.iauditor.R.color.grey_list_divider.getColor()
      myPaint.style = Paint.Style.FILL
      myPaint.isAntiAlias = true

      canvas.drawRoundRect(rect, 10f, 10f, myPaint)
   }
}

I’m very happy with the result and the little effort required to implement this, I definitely recommend using a similar approach over a classic Circular ProgressBar. Have fun! 👋