Placeholder Loading Block trong lúc chờ đợi Ajax + Render

Hi các bạn,

Hiện nay, vụ show web page xong rồi mới call Ajax lên API lấy data về rồi render ra các items là chuyện rất là phổ biến ở thời điểm hiện tại 😀

Cũng như khi đang request Ajax, ta thường thấy 1 page trắng tinh, site nào siêng siêng thì blur lại cái screen kèm 1 cái loading indicator ở giữa và sẽ ẩn đi khi items đã dc render ra page.

Tuy nhiên, ta còn có thêm 1 cách nữa rất là hay đó chính là dùng Placeholder Loading. Bài này mình sẽ walkthough đơn giản về cái này.

Kiến thức cần:

• HTML (Chủ yếu)
• Grid knowledge – follow bootstrap structure

1/ Thư viện hỗ trợ Placeholder Loading Block

Mình sẽ dùng thư viện này nhé: https://github.com/zalog/placeholder-loading

CDN links: https://cdn.jsdelivr.net/npm/placeholder-loading/dist/css/placeholder-loading.min.css

2/ Cơ bản về Placeholder Loading Block

Mọi documentation đều ở trên link GitHub kia nhé, mình sẽ practice một số cases đơn giản ở bài viết này.

2.1/ Show những items to to mà 1 row 1 item – text only

Code:

<div class="ph-item">
			<div class="ph-col-12">
				<div class="ph-row">
					<div class="ph-col-6 big"></div>
					<div class="ph-col-4 empty big"></div>
					<div class="ph-col-2 empty big"></div>
					<div class="ph-col-4"></div>
					<div class="ph-col-8 empty"></div>
					<div class="ph-col-6"></div>
					<div class="ph-col-6 empty"></div>
					<div class="ph-col-12"></div>
				</div>
			</div>
		</div>

2.2/ 1 row 1 item kèm tấm hình feature to ở trên

Code:

<div class="ph-item">
			<div class="ph-col-12">
				<div class="ph-picture"></div>
				<div class="ph-row">
					<div class="ph-col-6 big"></div>
					<div class="ph-col-4 empty big"></div>
					<div class="ph-col-2 big"></div>
					<div class="ph-col-4"></div>
					<div class="ph-col-8 empty"></div>
					<div class="ph-col-6"></div>
					<div class="ph-col-6 empty"></div>
					<div class="ph-col-12"></div>
				</div>
			</div>
		</div>

2.3/ 1 row 1 item kèm tấm hình feature nhỏ bên trái

Code:

<div class="ph-item">
			<div class="ph-col-12">
				<div class="row">
					<div class="col-md-4">
						<div class="ph-picture"></div>
					</div>
					<div class="col-md-8">
						<div class="ph-row">
							<div class="ph-col-6 big"></div>
							<div class="ph-col-6 empty"></div>
							<div class="ph-col-12"></div>
							<div class="ph-col-12"></div>
							<div class="ph-col-12"></div>
							<div class="ph-col-12"></div>
							<div class="ph-col-12"></div>
						</div>
					</div>
				</div>
			</div>
		</div>

2.4/ 1 row 2 items  có hình feature – kết hợp bootstrap

Code:

<div class="row">
			<div class="col-xs-12 col-md-6">
				<div class="ph-item">
					<div class="ph-col-12">
						<div class="ph-picture"></div>
						<div class="ph-row">
							<div class="ph-col-12 big"></div>
							<div class="ph-col-4"></div>
							<div class="ph-col-8 empty"></div>
							<div class="ph-col-6"></div>
							<div class="ph-col-6 empty"></div>
							<div class="ph-col-12"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-md-6">
				<div class="ph-item">
					<div class="ph-col-12">
						<div class="ph-picture"></div>
						<div class="ph-row">
							<div class="ph-col-12 big"></div>
							<div class="ph-col-4"></div>
							<div class="ph-col-8 empty"></div>
							<div class="ph-col-6"></div>
							<div class="ph-col-6 empty"></div>
							<div class="ph-col-12"></div>
						</div>
					</div>
				</div>
			</div>
		</div>

3/ Kết luận về Placeholder Loading Block

Với cái này thì UI web của bạn sẽ ok lên hơn 1 chút, thay vì 1 block trống không đợi Ajax request rồi mới render ra items thì nhìn nó hơi thô :v.

Khi items của bạn đã được rendered ra rồi thì có thể hide hay xóa luôn cái element mà chứa cái loading block này là dc 😀

Một số note mà đáng quan tâm:

• Cái này chỉ only css, dùng flexbox nên các bạn để ý, older browser có khi ko hỗ trợ.
• Có thể kết hợp dùng grid của bootstrap
• Better UI/UX

Về những thằng đang sử dụng trò này thì rất nhiều, ví dụ như: Tiki, Sendo,… (Tất nhiên có khi họ ko dùng lib css này, họ tự viết css riêng chẳng hạn haha)

Tổng hợp code trong 1 file đây: https://gist.github.com/sethsandaru/3acce8f7bbe252d35b47e341cb9fbc62

Cám ơn các bạn đã quan tâm theo dõi.

Cám ơn Zalog đã cho 1 cái lib css gọn nhẹ dễ sử dụng :D.