يبدو رائعًا يا ديفيد! اقتراح واحد: هل من الممكن إبقاء شريط التقدم يتحرك (ربما بوتيرة أبطأ) بدلاً من التوقف في المنتصف حتى أثناء انتظار الاستجابة؟ ربما يمكنه التحرك ببطء من 40% إلى 70% ثم التوقف إذا لم تصل استجابة؟
إخفاء هذا التوقف القصير سيجعل التجربة تبدو أكثر استجابة وفورية في رأيي 
حاليًا، يبدو أنه يتباطأ لمدة 5 ثوانٍ قبل التوقف عند عرض 80%.
هنا قمت بمحاكاة اتصال إنترنت بطيء جدًا:
SCSS الحالي:
.loading-indicator-container {
--loading-duration: 5s;
--loading-function: cubic-bezier(0, 0, 0, 1);
--done-duration: 0.4s;
--done-function: ease;
--fade-out-duration: 0.4s;
position: fixed;
top: 0;
left: 0;
z-index: 1001;
height: 3px;
width: 100%;
opacity: 0;
transition: opacity var(--fade-out-duration) ease var(--done-duration);
background-color: var(--primary-low);
}
.loading-indicator-container .loading-indicator {
height: 100%;
width: 100%;
width: 0%;
background-color: var(--tertiary);
}
.loading-indicator-container.loading {
opacity: 1;
transition: opacity 0s;
}
.loading-indicator-container.loading .loading-indicator {
transition: width var(--loading-duration) var(--loading-function);
width: 80%;
}
.loading-indicator-container.done .loading-indicator {
transition: width var(--done-duration) var(--done-function);
width: 100%;
}
body.discourse-hub-webview .loading-indicator-container {
top: 1px;
}
body.footer-nav-ipad .loading-indicator-container {
top: 49px;
}
body.loading #main-outlet {
opacity: 0.2;
transition: opacity 0.2s ease;
}
حسنًا، يتوقف الأمر بالنسبة لي عند حوالي 40%، لكن شريطًا متحركًا — حتى لو كان أبطأ — سيكون أفضل من توقف مؤقت، أعتقد ذلك.
أيضًا، فيما يتعلق بالاختفاء التدريجي: ربما أن إخفاء المحتوى تدريجيًا وإدخال المحتوى الجديد سيبدو أسرع (إذا كان من الممكن استهداف مخرج مسار التحميل)؟
يحدث أمران…
@Canapin محق في أن الحركة الأولية تنتهي بعد 5 ثوانٍ عند نسبة 80%… لذا، في حالة اتصال بطيء، ستتوقف عند هذه النقطة ولن تكتمل إلا عند الانتقال إلى الصفحة التالية.
حالة @P16 هي ما أواجهه على اتصال أسرع… بمجرد حدوث الانتقال بعيدًا عن الصفحة الحالية، تتوقف الحركة مؤقتًا أينما وصلت… ثم تستمر ثانية واحدة لاحقًا في الصفحة الجديدة (تم تضخيم ارتفاع الشريط هنا ليكون مرئيًا).
أتفق على أن استمرار بعض الحركة أمر مثالي، لكنه قد لا يكون ممكنًا دون تغيير طريقة التنفيذ بالكامل…
لا أعتقد أن التلاشي التدريجي للإظهار سيساعد كثيرًا… لا يمكنك إظهار المحتوى تدريجيًا حتى تحصل عليه، مما يعني أنك تؤخر ظهوره قليلاً بهذه الطريقة. أظن أنه من الممكن أن يخلق ذلك وهمًا بالسرعة، لكنه تقنيًا سيكون أبطأ بمقدار مدة حركة التلاشي التدريجي للإظهار!
لقد أدركت للتو أنه يمكنك اختبار التلاشي التدريجي للإظهار (نوعًا ما) مع مكون جدول المحتويات (لأنه يُظهر المنشور تدريجيًا)، على سبيل المثال… قم بزيارة: PostgreSQL 13 update. لا أعتقد أن ذلك يبدو أسرع بشكل ملحوظ… لكنه بالتأكيد “أكثر نعومة”.
آه، أعتقد أن هذا يحدث لأن المحتوى تم تحميله بالفعل، وهناك توقف كبير في عملية تحليل HTML / تداخل الأنماط / التخطيط / العرض، وخلال هذا التوقف لا يمكن للأنيميشن التحرك.
.loading-indicator-container .loading-indicator, .loading-indicator-container {
background-color:#FFCC00;
}
لقد حاولت تغيير اللون في CSS للقالب، لكنه يبقى أزرق. هل يمكنكم المساعدة؟
نعم بالضبط. الطبيعة أحادية الخthreadية لـ JS / تصيير DOM تعني أننا نفقد الكثير من الإطارات أثناء تصيير موضوع ما 
. الشريط المنزلق ‘يتحرك’ طوال الوقت، لكن الإطارات لا يتم تصييرها أبدًا.
شكرًا لك. لقد قمت بتنظيم ذلك في النواة، لذا سيتم إصلاحه هنا على Meta قريبًا جدًا.
سأقوم بتشغيل تأثير التلاشي على Meta اليوم حتى نتمكن من رؤية كيف يبدو. على الرغم من أنه من الواضح أنه إذا قمنا بذلك، فسنريد إزالة تأثيرات التلاشي الأخرى مثل مكون جدول المحتويات.
تعديل: تم ذلك. تم تفعيل التلاشي على Meta.
اعتمادًا على الترتيب الذي يتم فيه تحميل القوالب/المكونات الخاصة بك، قد لا يعمل ذلك. تحتاج إلى جعل المحدد ‘أكثر تحديدًا’ من CSS لمكون شريط التحميل. أبسط شيء هو على الأرجح إضافة !important إلى background-color. ستحتاج أيضًا إلى إزالة محدد الحاوية، وإلا سيكون الخلفية مثل المقدمة:
.loading-indicator-container .loading-indicator {
background-color:#FFCC00 !important;
}
شكرًا لك يا دافيد، يبدو رائعًا!
الآن، يتم أخذ متوسط آخر 5 تحميلات للصفحة، ويُستخدم هذا المتوسط لتحديد سرعة الشريط
مرحبًا ديفيد،
هذا المحمل يتحسن باستمرار استمر في عملك الرائع.
مع هذا التحديث الجديد، يبدو الأمر أكثر ديناميكية
لاحظت شيئًا واحدًا فقط بخصوص هذا في التصنيف. أنا أستخدم زر إنشاء موضوع لإعادة التسمية. 
مع شريط التحميل، لا يتم تحديث نص الزر. لاحظت ذلك فقط لأنه قد يسبب مشاكل مع سكريبتات أخرى.
عرض توضيحي (في هذا الفيديو، أضغط على تصنيف يحتوي على نص مختلف لزر إنشاء موضوع، ثم أنتقل إلى تصنيف آخر يحتوي على النص الافتراضي لزر إنشاء الموضوع). بعد تحديث الصفحة بالكامل، يظهر النص الصحيح.
التلاشي التدريجي عند الظهور/الاختفاء يُعدّ تحسينًا. لكنني ما زلت أجد أن شريط التمرير مُشتت. فأنا أجد نفسي أنظر إليه، مما يعني أنني أكون أبطأ في الاستعداد لقراءة الصفحة عند تحميلها. أما مع مؤشر التحميل، فقد كان في مكان واحد، لذا كان من السهل عدم الانتباه إليه، كما أن ظهوره المفاجئ يوحي بالسرعة (ربما بشكل خاطئ).
قد يكون شريط التمرير أفضل في حالة الاتصالات البطيئة، حيث يمكنك الشعور بمدى سرعة أو بطء تحميل الصفحة. لكنني لست متأكدًا من ذلك.
بالنسبة لي، عند استخدام الهاتف المحمول، يقع الشريط المنزلق في أعلى الشاشة، بينما يقع الشريط القديم في منتصف الشاشة تقريبًا، أي على بعد 30% من الأعلى…
بدلاً من الحفاظ على تركيز عينيك في وسط هاتفك، تضطر إلى تحريكها للأعلى والأسفل، للأعلى والأسفل… مجرد رأي شخصي…
أوافق على ذلك. أعتقد أن الأفضل هو أن يعمل شريط التحميل على سطح المكتب فقط، بينما يُحتفظ بالرمز الدوّر على الهواتف المحمولة. فالرمز الدوّر يعطي شعوراً أكثر باستخدام تطبيق، وهو أمر جيد على الهواتف المحمولة. تماماً كما يفعل يوتيوب مع أدوات التحميل.
نعم، لقد كنت أستخدمه على iPhone، لذا فإن تعليقاتي كانت تتعلق حقًا بالجوال.
أعجبني المفهوم حقًا. أنا من المعجبين الكبار بالشرائح (sliders) مقارنة بالدوارات (spinners).
تم تفعيلها وتجربتها على العديد من السمات (Dark, Alien, Vincent, Star Wars، وغيرها) على شاشات ROG مقاس 27 و34 بوصة. بالكاد يمكن رؤية شريط التحميل. يبدو رفيعًا جدًا. في السمات «الداكنة»، بدا الخط الرفيع بلون ناعم جدًا لدرجة يصعب معها ملاحظته.
كما جربت الشريط على الهاتف المحمول، iPhone 6s وiPhone 6+. التعليقات مماثلة. بالكاد ملحوظ.
أسعى لتجنب أن أكون مُفسدًا للمزاج الاجتماعي، لكن موضوعيًا، يبدو الشريط واعدًا لكنه يحتاج إلى عمل إضافي على CSS (في رأيي)، لذا عدنا مؤقتًا إلى الدوارة (spinner) على موقعنا لأنه ملحوظ ويروي «قصة إعادة التحميل بوضوح». عندما أجد وقتًا، سأقوم بتفعيله مرة أخرى وأعمل على تحسين CSS لموقعنا؛ لأن هذا يبدو واعدًا حقًا!
يبدو واعدًا جدًا!
شكرًا لكم، واستمروا في العمل الرائع!
ملاحظة: لا توجد مشاكل في السرعة. أنا متصل (قريبًا) بشبكة الألياف البصرية الوطنية، عبر اتصال ألياف مخصص إلى العمود الفقري الرئيسي.
أود فقط أن أذكر أنني لا أحب سلوك تجربة المستخدم الجديد عند اختيار الفئات والمواضيع وما إلى ذلك، حيث يصبح العرض الحالي باهتًا قبل تحميل الصفحة الجديدة. أعتقد أن النهج القديم المتمثل في عرض صفحة فارغة مع مؤشر تحميل كان تجربة أفضل بكثير.
في كلتا الحالتين، تتغير الصفحة مرتين. ولكن نظرًا لأن مؤشرات التحميل أمور عالمية، لم يكن الأمر يبدو حقًا كأن الصفحة تتغير مرتين. كان يبدو وكأنها تستعد للتغيير، ثم تتغير مرة واحدة. أما الآن، فيبدو وكأنها تتغير مرتين، لأنه لا يزال هناك محتوى بعد كل من التحولات، مرة باهتًا ومرة لمحتوى الصفحة الجديدة. من الصعب تحديد السبب الدقيق لعدم إعجابي به، لكنني أعتقد أنه بسبب عدم وجود عرض تحميل عالمي بعد الآن. الآن، هناك فعليًا عدد لا نهائي من عروض التحميل المختلفة، وأجد أن عرض التحميل الذي يبدأ بالبهوتان ثم التحميل مشتتًا، حيث أن المحتوى الخلفي يختلف في كل مرة أنتقل فيها إلى صفحة جديدة.
بعض الأمور التي تستخدم خطافات didInsertElement ستحتاج إلى تحديث، نعم. مع العجلة الدوارة القديمة، كانت جميع العناصر في الصفحة تُدمَّر وتُعاد إنشاؤها. مع النظام الجديد، سيعيد Ember استخدام العناصر إن أمكن. وهذا قد يجعل التصيير أسرع قليلاً في الواقع، لكنه قد يُحدث بعض الأخطاء إذا لم تتبع التخصيصات أنماط Ember المعتادة. سنحتاج إلى العمل على ذلك وتنظيف هذه الأمور مع ملاحظتها.
هل لديك كود التخصيصات الخاصة بك في مستودع Git يمكنك مشاركته؟
هذا هو السبب الرئيسي الذي يجعلني أرغب في تجربة هذا كعنصر سمة لفترة أطول قليلًا - سنتمكن من التقاط أكبر عدد ممكن من المشاكل قبل نقله إلى النواة.
بالتأكيد، إليك المستودع. شكرًا لك
أعتقد أن هناك خللاً في النسخة المحمولة (على الأقل في iPhone) مع هذه الميزة الجديدة. عند تحديد “الأحدث” من القائمة المنسدلة في شريط التنقل، تختفي القائمة المنسدلة بشكل صحيح عند تحميل الصفحة. لكن عند تحديد “جديد” أو “غير مقروء” (وربما خيارات أخرى)، تظل القائمة المنسدلة ظاهرة. لا يحدث هذا في جميع الأوقات، لكنه يحدث بشكل متكرر بما يكفي لكونه قابلاً للتكرار بسهولة. تجدر الإشارة إلى أن هذا الحدوث كان يحدث أحياناً في الإصدار القديم، لكنه كان يحدث فقط مع خيار “الأحدث” ولم يحدث أبداً مع “جديد” أو “غير مقروء”.
شكرًا لك @Don - جربت هذا وأعتقد أن هذه طريقة أفضل للقيام بذلك، والتي يجب أن تعمل مع شريط التمرير الجديد: https://github.com/VaperinaDEV/category-btn-name/pull/1 (آسف إذا أخطأت في أي شيء في اللغة الهنغارية). يجب أن يكون هذا النمط مفيدًا إذا احتاج آخرون إلى تحديث مكوناتهم أيضًا (باستخدام الخصائص المحسوبة بدلاً من didInsertElement و jQuery).
تمت إضافتها إلى قائمتي للتحقيق، شكرًا لك