‏phantom-ui؛ اسکلتون لودینگ خودکار برای هر فریم‌ورک

اسکلتون‌لودرهای سنتی یه دردسر دارن: باید برای هر کامپوننت یه نسخهٔ دوم فقط برای حالت لودینگ بسازی و نگه‌داری کنی، و هر بار که کامپوننت اصلی عوض می‌شه اسکلتونش عقب می‌مونه. phantom-ui این رو حذف می‌کنه؛ خود کامپوننت واقعی همون قالب اسکلتونه.

طرز کارش اینه: کامپوننت واقعی رو با متن نامرئی رندر می‌کنه، موقعیت و اندازهٔ هر عنصر برگ رو با getBoundingClientRect اندازه می‌گیره و بلوک‌های شیمر متحرک رو دقیقاً روی همون مختصات می‌ذاره. پس‌زمینه و حاشیهٔ کانتینرها می‌مونن تا قاب کارت موقع لودینگ طبیعی به‌نظر برسه.

چون یه Web Component استاندارده (با Lit ساخته شده)، توی React، Vue، Svelte، Angular، Solid، Qwik، HTMX یا HTML خام کار می‌کنه و آداپتور جداگانه‌ای لازم نداره. استفاده‌اش هم ساده‌ست — اتریبیوت loading رو می‌ذاری تا شیمر بیاد و برمی‌داری تا محتوای واقعی ظاهر شه:

<phantom-ui loading>
  <div class="card">
    <img src="avatar.png" width="48" height="48" />
    <h3>Ada Lovelace</h3>
  </div>
</phantom-ui>

برای لیست‌ها هم اتریبیوت count رو می‌دی تا یه ردیف قالب رو چند بار تکرار کنه. سازنده می‌گه ثبت المنت در برابر فراخوانی تکراری customElements.define() گارد شده، پس توی میکروفرانت‌اند، ایمپورت داینامیک و HMR هم بدون مشکل بارها مقداردهی می‌شه.

یه اسکریپت postinstall هم بعد از نصب، پروژه رو تشخیص می‌ده: برای React، Solid و Qwik فایل تعریف نوع JSX می‌سازه و برای فریم‌ورک‌های SSR مثل Next.js، Nuxt، SvelteKit و Remix یه CSS پیش از هیدریشن اضافه می‌کنه تا محتوا قبل از هیدریت‌شدن نپره.

نکات کلیدی:

• phantom-ui از روی DOM واقعی، اسکلتون شیمر رو خودکار می‌سازه
• دیگه لازم نیست برای هر کامپوننت یه نسخهٔ اسکلتون جدا نگه‌داری کنی
• یه Web Component مبتنی بر Lit‌ـه و توی همهٔ فریم‌ورک‌ها کار می‌کنه
• اتریبیوت loading شیمر رو سوییچ می‌کنه و count برای لیست‌هاست
• ست‌آپ خودکار: تایپ JSX و CSS پیش از هیدریشن برای فریم‌ورک‌های SSR