مكوّن حالة الانتظار (Pending State Component)

الدرس 23 من 34 · دورة TanStack Router الكاملة · 4 دقيقة و36 ثانية

الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.

مستودع الكود لهذا الدرس

الفرع: loaders-4

[00:01] لكن لنقل — لنُحاكِ — أنّ طلبنا بطيء قليلًا ربّما، ولنقل أنّ طلب التعليقات (comments) بطيء. ففي هذا المكان، عندما نجلب تعليقاتنا، لنضيف تأخيرًا اصطناعيًا هنا هكذا. فأنا أضيف فقط

[00:18] تأخيرًا قدره ثلاث ثوانٍ قبل أن نُرجع بياناتنا. والآن، إذا حفظنا هذا وحدّثنا الصفحة، فكما ترى سنحصل على هذه الصفحة الفارغة لنحو ثلاث ثوانٍ، ثم سنرى مسارَنا معروضًا هنا. وسيحدث الأمر ذاته إذا

[00:33] كنا مثلًا في مسار posts لدينا، وتنقّلنا إلى أيّ تدوينة (post). فسنبقى عالِقين هنا ثلاث ثوانٍ ثم سننتقل. إذًا يمكننا أن نجعل هذه التجربة أفضل قليلًا داخل مسارنا. ففي مسارنا posts/ id

[00:51] يمكننا هنا تعريف مكوّن انتظار (pending component)، وسيُعرَض هذا المكوّن بدلًا من مكوّن مسارنا أي ذلك المكوّن الحاوي للتدوينة، حتى يكتمل تحميل مسارنا. فطالما كان مكوّننا قيد الانتظار أو كان

[01:05] مسارُنا قيدَ الانتظار. ففي هذا المكان، لنمرّر ببساطة دالةً، ويمكنك أن تضع ربّما هيكل تحميل (skeleton) أو شيئًا من هذا القبيل.

[01:11] ومع ذلك، وبغرض البساطة، سأضع ببساطة وسم div مع بعض نص التحميل (loading) هكذا.

[01:19] و— عذرًا — لَدَيَّ هنا فاصلة (comma) ناقصة. فالآن إذا حدّثنا الصفحة، فكما ترى، نحصل على هذا التحميل.

[01:27] وأيضًا، إذا ذهبنا ربّما إلى posts ثم ذهبنا إلى أيّ تدوينة، فسنكون بوضعٍ أفضل قليلًا بما أنّ لدينا مؤشّر تحميل (loading indicator) ما بدلًا من أن نبقى عالِقين

[01:42] في المسار السابق.

[01:44] ويمكننا أيضًا التحكّم في كيفية عمل مكوّن الانتظار هذا بتحديد بعض الخيارات (options)، إمّا في المسار أو في موجّهنا عندما نُعرّف موجّهَنا لأوّل مرة هنا. لكن دعنا نفعل ذلك لهذا المسار أوّلًا. ففي هذا المكان، لنقل

[02:01] سأعود مرةً أخرى. لنحدّث الصفحة.

[02:05] افتراضيًا، لن يظهر هذا المكوّن إلا إذا استغرق التحميل لَدَينا أكثر من قدرٍ معيّن من الزمن — أظنّ ثانية تقريبًا. فسأنقر عليه؛ فلن يظهر إلا بعد ثانية. وبعد ثانية،

[02:19] سنرى هذا. ويمكننا تخصيص ذلك بالذهاب إلى هنا وتعريف pendingMs أي الميلي ثانية (milliseconds).

[02:28] وإذا ضبطناه على صفر مثلًا — عذرًا — على صفر، فسوف يظهر فورًا. فإذا عدتَ إلى هنا ثم حدّثتَ ونقرتَ، فسنحصل فورًا على مكوّن التحميل هذا هنا. وإن

[02:44] أردتَ ضبط هذا الخيار عالميًا (globally) لكل مساراتنا، حين نُعرّف موجّهَنا هنا يمكننا تعريف defaultPendingMs، لكنّني لن أفعل ذلك هنا.

[02:57] فلنُبقه في مسارنا. ولدينا أيضًا خيار آخر. فلنقل أنّنا نعود ربّما إلى دالتَنا ونزيل هذا التأخير.

[03:08] ولنقل أنّ دالتَنا — بياناتنا — تُحمَّل بسرعة كافية. فإذا عدتَ الآن — حدّثتَ الصفحة ربّما ونقرتَ على تدوينة — فسنرى مكوّن التحميل هذا مدةً قصيرة جدًا، وقد لا تكون أكثر حتى من

[03:24] الزمن الذي رأيناه هنا.

[03:26] فإذا ظهر لميلي ثانية واحدة فقط تقريبًا فسوف يومض ويختفي فورًا، وهو ما قد لا يكون تجربةً جيدة جدًا. ولهذا السبب، افتراضيًا، سيعرض TanStack Router مكوّنَ الانتظار

[03:39] لمدةٍ لا تقلّ عن 500 ميلي ثانية.

[03:43] حتى لو لم تأخذ البيانات 500 ميلي ثانية لتُحمَّل، فسوف يظهر هذا المكوّن لمدة لا تقلّ عن 500 ميلي ثانية تفاديًا لسلوك الوميض (flashing behavior) هذا. ويمكننا أيضًا تخصيص ذلك بإضافة pendingMinMs

[03:57] هنا. إذا ضبطنا هذا صفرًا مثلًا — ولنجرب ربّما، أو في الواقع لتجربته لنضبطه على رقم كبير — بحيث نرى أنّه سيبقى هذا الرقم حدًّا أدنى. فإذا ذهبنا الآن

[04:13] فكما ترى، بياناتنا اكتمل تحميلها على الأرجح، لكن ما زال لَدَينا مكوّن التحميل هذا لمدة هذا القدر من الزمن. افتراضيًا، القيمة 500 ميلي ثانية تفاديًا لهذا السلوك الوميضي إذا اكتمل تحميل بياناتك في

[04:27] مدةٍ قصيرة جدًا من الزمن. ويمكن أيضًا ضبط هذا الخيار عالميًا هنا بتحديد defaultPendingMinMs كذلك.