إحصائيات المستخدم غير صحيحة في دليل المستخدم

خلل
8

إذًا، انتهى بنا الأمر إلى حالة “سباق” سيئة بين “الحارس” الذي نستخدمه لاكتشاف متى نحتاج إلى تشغيل إجراء “تحميل المزيد” وعرض الصفوف في دليل المستخدمين :exploding_head:

المشكلة

عندما كان هناك 50 مستخدمًا على الأقل، كانت صفحة /u (دليل المستخدمين) تشغل loadMore فورًا عند التحميل الأول، قبل أن يتمكن المستخدم من التمرير لأسفل. تسبب هذا في تحميل صفحة ثانية غير مرغوب فيها من النتائج تلقائيًا.

السبب الجذري

حالة سباق توقيت أثناء تحميل الصفحة الأولي:

  1. ينتقل المستخدم إلى /u
  2. يبدأ controllers/users في تحميل البيانات (isLoading: true)
  3. يتم عرض القالب مع ConditionalLoadingSpinner الذي يعرض الدوار
  4. تصل البيانات، وتصبح isLoading false
  5. يختفي الدوار، ويبدأ DirectoryTable في عرض 50 مستخدمًا
  6. يتم إدراج عنصر الحارس LoadMore في DOM
  7. يتم إنشاء IntersectionObserver ويبدأ في المراقبة فورًا
  8. في هذه اللحظة، لا يزال الجدول يحسب التخطيط/يتوسع إلى الارتفاع الكامل
  9. يظهر الحارس لفترة وجيزة في منفذ العرض (~292 بكسل من الأعلى) قبل أن يتوسع الجدول
  10. يكتشف المراقب التقاطع → يشغل loadMore :cross_mark:
  11. يكمل الجدول التوسع إلى الارتفاع الكامل (~3689 بكسل)
  12. ينتقل الحارس إلى الموضع الصحيح (~3959 بكسل، أسفل منفذ العرض)

كان المراقب “متسرعًا جدًا” - بدأ المراقبة قبل انتهاء المحتوى من تخطيطه، والتقط الحارس خلال اللحظة القصيرة عندما لم يصل الجدول إلى ارتفاعه النهائي بعد.

الإصلاح

تأخير إنشاء المراقب حتى يصبح المحتوى جاهزًا:

تمت إضافة معلمة @isLoading إلى LoadMore تمنع إنشاء IntersectionObserver عندما لا يزال المحتوى قيد التحميل.

كيف يعمل الآن

تحميل الصفحة → isLoading=true → يتخطى المعدل إنشاء المراقب
             ↓
تحميل البيانات → isLoading=false → يعيد المعدل التشغيل، وينشئ المراقب
             ↓
الجدول متوسع بالكامل → الحارس في الموضع الصحيح (أسفل منفذ العرض)
             ↓
يقوم المستخدم بالتمرير لأسفل → يدخل الحارس منفذ العرض → يتم تشغيل loadMore ✓
5 إعجابات