Description

During Q3 we conducted a detailed analysis of the Front End performance issues, origin and mitigation strategies.

As part of the goal to reduce the number of components rendered in the page, the most effective measure is to limit typed list items presented at once.

Implement whatever design solution we've come up during T391129: Design: Limit number of items rendered in typed lists

Desired behavior/Acceptance criteria

1. Loading & Sorting

• User loads typed list
• List Item
  • Items are sorted by language priority:
    • User language
    • Fallback languages
    • Common languages (spanish, french?)

2. Show vs. Hide “Load More”

• If items > limit → show Load More button
• If items ≤ limit → show all items, no button
• The limit only is used to limit the list on first load. any user interaction: adding an item from dialog, adding a blank item or deleting an item from the list, ignore the limit set, so the list can become shorter or longer after user interaction.

3. Dialog Behavior

• Clicking Load More opens dialog
• Dialog shows all items in store for the typed list, alphabetically sorted

4. Item Click in Dialog

• If item already in typed list → close dialog
• If item in store but not in typed list →
  • should append to the items in the typed list
• If item not in store and therefor not in typed list →
  • if not in edit mode: link to edit page
  • if in edit mode:
    • need to add the item to the store for this typed list,
    • then; should append to the items in the typed list

5. Adding Blank Items

• Clicking Add Button →
  • currently creates blank item in store (pushItemsByKeyPath),
  • then; should append to the items in the typed list

6. Show More Button Visibility

• Disappears only when all store items from the dialog are added to the typed list

7. Editing the List

• User can:
  • NOT Move items up or down in the typed list →
    • the modeselector move before and after will be disabled for these mono/multi-linguallists because for each user the order represented will be different.
  • Delete items →
    • currently updates store with deleteListItemsByKeyPath where it removed the item from the typed list in the store
    • should visually remove the item from the typed list.

Devices and Design (URLs or screenshots)

Figma: https://www.figma.com/design/EzzGFcdy5VM1vDKSyiF9Ci/Limit-number-of-items-rendered-in-typed-lists?node-id=177-16141&t=cb6jCGyhOEDQwin2-1
Video demo: https://drive.google.com/file/d/1Qfj2-oEFciH_wIjTH6CnV1CY1BWE8vSo/view

User flows

User interactions: Deleting and Adding items

I will describe some interactions with the types list vs dialog

LIMIT = 4
INITIAL STORE ORDER (incoming data):

1. german - keypath z12k1.1
2. some fallback lang - keypath z12k1.2
3. english - keypath z12k1.3
4. userlang - keypath z12.k1.4
5. arabic - keypath z12k1.5

A:
List:

1. userlang - keypath z12.k1.4
2. some fallback lang - keypath z12k1.2

dialog - alphabetic:

1. arabic - keypath z12k1.5
2. german - keypath z12k1.1

ACTION = adding arabic/z12k1.5

B:
List:

1. userlang - keypath z12.k1.5
2. some fallback lang - keypath z12k1.2
3. arabic - keypath z12k1.13

Dialog:

1. german - keypath z12k1.1

ACTION = remove userlang/z12.k1.4

D:
List:

1. some fallback lang - keypath z12k1.2
2. arabic - keypath z12k1.5

Dialog:

1. german - keypath z12k1.1

ACTION = Add german/z12k1.1

E:
List:

1. some fallback lang - keypath z12k1.2
2. arabic - keypath z12k1.5
3. german - keypath z12k1.1

Button to show dialog is hidden. no more items to show in dialog.

ACTION = remove some fallback lang/12k1.2

F:
List:

1. arabic - keypath z12k1.5
2. german - keypath z12k1.1

Button to show dialog is hidden. no more items to show in dialog.

ACTION = move arabic down in the list

G:
List:

1. german - keypath z12k1.1
2. arabic - keypath z12k1.5

Button to show dialog is hidden. no more items to show in dialog.

ACTION = add new blank item

H:
List:

1. german - keypath z12k1.1
2. arabic - keypath z12k1.5
3. blank item - keypath z12k1.6

Button to show dialog is hidden. no more items to show in dialog.

ACTION = add 3 new blank items

I:
List:

1. german - keypath z12k1.1
2. arabic - keypath z12k1.5
3. blank item - keypath z12k1.6
4. blank item - keypath z12k1.7
5. blank item - keypath z12k1.8
6. blank item - keypath z12k1.9

Button to show dialog is hidden. no more items to show in dialog.

User interactions: Searching and adding an item

State A
List:

1. userlang - keypath z12.k1.4
2. some fallback lang - keypath z12k1.2

Dialog (alphabetic):

1. arabic - keypath z12k1.5
2. german - keypath z12k1.1

ACTION = search for 'spanish'

State B
List:

1. userlang - keypath z12.k1.4
2. some fallback lang - keypath z12k1.2

Dialog (alphabetic):

1. spanish - keypath NONE | "Add language" button in blue

ACTION = add 'spanish'

State C
List:

1. userlang - keypath z12.k1.4
2. some fallback lang - keypath z12k1.2
3. spanish - keypath z12k1.6 (store items length + 1)

Dialog (alphabetic):

1. arabic - keypath z12k1.5
2. german - keypath z12k1.1

Important considerations

• Deleting items Index/keyPath shifts in the store
• Language needs to be unique. We need a unique identifier because deleting causes index/keyPath shifts. So we need to be able to count on 1 language per Typed List.
• We need to restrict the lookup in expanded mode for monolingual string items in a typed list to only be able to show languages that are not yet visible in the Typed List. Also we need to filter the suggested items. (Should we also prevent on backend?)
• We need to decide what to do with double languages in already existing content. We probably need to first figure out if those cases actually exist.
• We need to test with more fallback languages than 10
• We need to test with an empty list

---

Completion checklist

• Before closing this task, review one by one the checklist available here: https://www.mediawiki.org/wiki/Abstract_Wikipedia_team/Definition_of_Done#Front-end_Task/Bug_Completion_Checklist