هياكل التحميل

الشاشة الفارغة أثناء التحميل تبدو كأنها معطّلة، ودائرة التحميل وحدها لا تخبر المستخدم بما سيأتي. أمّا هيكل التحميل (skeleton) فهو كتل رمادية لها شكل المحتوى المنتظر ومقاساته، فيعرف المستخدم ما سيظهر وأين سيظهر، ولا تقفز الصفحة عندما يصل المحتوى.

ويضيف وميض خفيف يعبر الكتل إحساسًا بأن التحميل ما زال مستمرًّا. ترسمه على ::after طبقةً فيها تدرّج لوني تتحرّك بـ transform من خارج الكتلة في جهة إلى خارجها في الجهة الأخرى، وتحصره الكتلة داخلها بـ position: relative وoverflow: hidden. والحركة التي لا تتوقّف هي أول ما يجب إيقافه لمن طلب تقليل الحركة.

والخطأ الشائع أن تحرّك background-position بدل ذلك، فهو يعمل لكنه يجعل المتصفح يعيد رسم الكتل في كل إطار، أمّا transform فلا يسبّب ذلك.