User Interface Placeholders in your web app for lazy-loading

Add short templated placeholders in your web apps to improve user experience on page load delays

06/24/21

UI, UX, Placeholders, Loading

User Interface Placeholders for your web apps

One of the exciting things front-end engineers do these days is to build templated web user interfaces placeholders as an effort to improve user experience showing the placeholders as content is fetched for display.

One key goodie for this approach is that, your users are not hit by a surprise when content loads onto their screen. It's an intuitive way of showing your users what user interface to expect. It's generic.

Sample JSX/TSX template for an image and text

<section className="token-loader-container">
     <div className="token-loader-item">
        <div
          style={{ width: "80%" }}
          className="on-loading token-loader-text"
        ></div>
        <div
          style={{ width: "60%" }}
          className="on-loading token-loader-text"
        ></div>
        <div>
          <span className="on-loading loader-btn"></span>
          <span
            style={{ marginLeft: 5 }}
            className="on-loading loader-btn"
          ></span>
        </div>
      </div>
</section>

The styles

.token-loader-container {
  padding: 10px 20px;
}

.token-loader-item {
  padding: 0 5px;
  margin: 10px auto;
}

.token-loader-container .token-loader-item:last-child {
  margin-bottom: 0;
}
.token-loader-container .token-loader-item:first-child {
  margin-top: 5px;
}

.token-loader-text {
  height: 10px;
  margin-bottom: 5px;
}

.on-loading {
  animation: pulse 0.75s linear alternate infinite;
}

.loader-btn {
  display: inline-block;
  width: 50px;
  height: 20px;
  border-radius: 5px;
}

@keyframes pulse {
  0% {
    background-color: #eee;
  }
  100% {
    background-color: #ddd;
  }
}

Author : Maye Edwin