mattermost-community/focalboard

Perf: Drag and drop cards in Kanban board view shows intermediate sort state

Open

#2315 aperta il 11 feb 2022

Vedi su GitHub
 (1 commento) (0 reazioni) (0 assegnatari)TypeScript (2542 fork)user submission
BugHelp WantedPerformanceSev/3Up for grabs

Metriche repository

Star
 (26.187 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

Steps to reproduce the behavior

  1. Open a board (Kanban) view
  2. Drag a card onto another card in a column with multiple (5+) cards
  3. The card first appears at the beginning or end, then moves to the right position a split second later

Expected behavior

The card should move directly to the dropped position

Screenshots

https://user-images.githubusercontent.com/46905241/153519856-3a0fd910-a008-46d9-bfca-fd1ee70e68d1.mov

Edition and Platform

  • Edition: Mattermost plugin
  • Version: v0.14
  • Browser and OS: Chrome on Mac

Additional context

In the browser network tab, notice that PATCH Block is called twice. This is because on onDropToCard in kanban.tsx, the property change and sort order are two separate API calls. Propose refactoring to call UpdateBlocks in a single call.

Guida contributor

Direzione di ricerca
Il problema si trova nel componente della vista Kanban, specificatamente nella funzione `onDropToCard` in `webapp/src/components/kanban/kanban.tsx` (riga 172). Attualmente, vengono effettuate due chiamate API PATCH separate per la modifica della proprietà e l'ordinamento, causando un glitch visivo. La soluzione consiste nel rifattorizzare il codice per chiamare `UpdateBlocks` una sola volta con entrambe le modifiche. Indaga sulla funzione `UpdateBlocks` e assicurati che la chiamata batch gestisca correttamente entrambi i campi. Controlla se esistono test esistenti per questo comportamento per convalidare la modifica.
Tech stack
typescriptreact
Dominio
frontend
Tipo issue
Performance
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 ore
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Nuova
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
ReactTypeScriptdrag and drop
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
70