Как избавиться от моргания блоков при их смене после подгрузок данных с сервера?

Question

[MishaXXL]

Есть компонент, который отображает внутри себя таблицы
Изначально он пустой и только при нажатии на кнопку, делает запрос и после рендерит таблицу
Но при смене таблиц, они начинают моргать
Как сделать так, чтобы при смене таблиц, они не моргали, а отображались моментально?

Вроде useLayoutEffect должен с этим бороться, но не понял, как в моем случае его применить

const btn_list = [
    { id: 1, link: 'Cities' },
    { id: 2, link: 'Countries' },
    { id: 3, link: 'Companies' },
]

function createTable(data: Rows[]) {
    return(
        <table className={style.table}>
            <thead>
                {createTableHeader(data)}
            </thead>

            <tbody>
                {data.map((item, i) => craeteTableRow(item, i))}
            </tbody>
        </table>
    )
}

export const Tables = () => {
    const tables = useRef(null)
    const [getTable, { data: table = [], isLoading }] = useGetTableMutation()

    function handleClick(link: string) {
        getTable(link)
    }

    return(
        <div className={'page'}>
            <section>
                <div className={style.submenu}>
                    {btn_list.map(item => <button onClick={() => handleClick(item.link)} key={item.id}>{item.link}</button> )}
                </div>
            </section>

            <section>
                {isLoading && <div className={style.noTable}></div> }
                <div ref={tables} className={style.tableWrapper}>
                    {Boolean(table.length) && createTable(table)}
                </div>
            </section>
        </div>
    )
}

Answer 1

[Михаил Р.]

Моргает он потому, что в момент отрисовки старый уже удален, а новый еще не отрисован. Варианты решения:
- Убедиться точно, что новый контент загружен и лишь затем его выводить. Если контент будет слишком тяжелый для устройства клиента, то этот метод не сработает, т.к. устройству еще понадобится время для его рендера, т.е. моргание будет заметно.
- Добавить некий loading в место, где ожидается появление новых данных.

Как вариант, вместо пустого дива:

<section>
    <div ref={tables} className={style.tableWrapper}>
        {isLoading ? createTable(currentTable) : createTable(table)}
    </div>
</section>

Comments

[MishaXXL]

Не совсем понял, т.е. при запросе getTableсразу удаляются старые данные, что ведет к ререндеру пустоты и после загрузки новых происходит второй?

Убедиться точно, что новый контент загружен и лишь затем его выводить

Мне казалось, что в данном случае логика такая
- делаем запрос, ничего не происходит до ответа
- когда приходит ответ, выполняется первый ререндер
- когда делаем еще один запрос, отображены старые данные и до появления новых в data, ничего не происходит, а после загрузки уже происходит ререндер с новыми
отсюда я пытался исходить из логики, что useLayoutEffectнужно добавить в зависимости data, что позволит избежать моргания

Поправьте пожалуйста в чем я ошибся и почему оно работает не так

[Михаил Р.]

MishaXXL, попробуйте так:

<section>
    <div ref={tables} className={style.tableWrapper}>
        {isLoading ? createTable(currentTable) : createTable(table)}
    </div>
</section>

[MishaXXL]

Михаил Р., спасибо, сработало
Если я правильно понял, то так должно было быть

const currentTable = useRef([])

useEffect(() => {
   if(data && data.length) currentTable.current = data
}, [data])

{isLoading ? createTable(currentTable.current) : createTable(data)}

[Михаил Р.]

MishaXXL, да, вполне

[WbICHA]

Добавить некий loading в место, где ожидается появление новых данных.

Или, как более приятный вариант, имхо, отображать скелетон вместо загрузки.

[Михаил Р.]

WbICHA,

отображать скелетон вместо загрузки

А скелетон это не разновидность placehoder-а загрузки? ;)

[WbICHA]

Михаил Р., не обязательно. Да, в 99% случаев это действительно так, но всё же могут быть кейсы, когда это не так. К примеру, в сложных формах, где сначала местами отображается скелетон и только после выбора конкретных полей скелетон заменяется реальными данными.
А по поводу placehoder-а загрузки, под загрузкой я имел ввиду лоадер.)

[MishaXXL]

WbICHA, как быть со скелетоном, если у меня может загрузка длиться 0.1 сек?
Я так понял речь идет о этом пакете
https://www.npmjs.com/package/react-loading-skeleton
Он мне вернул моргание )

И для корректного отображения копии блока, нужно именно этот способ использовать?
Просто в других я не совсем понял суть с count <Skeleton count={3} />

function Box({ children }: PropsWithChildren<unknown>) {
  return (
    <div
      style={{
        border: '1px solid #ccc',
        display: 'block',
        lineHeight: 2,
        padding: '1rem',
        marginBottom: '0.5rem',
        width: 100,
      }}
    >
      {children}
    </div>
  );
}

// Method 1: Use the wrapper prop
const wrapped1 = <Skeleton wrapper={Box} count={5} />;

// Method 2: Do it "the normal way"
const wrapped2 = (
  <Box>
    <Skeleton />
  </Box>
);

[WbICHA]

MishaXXL,

Я так понял речь идет о этом пакете

Да не важно о каком именно. Мы же не о пакете говорим, а о понятии.)

как быть со скелетоном, если у меня может загрузка длиться 0.1 сек?

С такой быстрой загрузкой смысла особо и нет не то, что скелетон вешать, а даже лоадер. Тут любое изменение юи будет выглядеть как моргание.

[MishaXXL]

WbICHA, раз уж мы тут собрались )
Подскажи пожалуйста, почему в useMutation кэширование по умолчанию не работает?
В документации написано, что оно установлено по умолчанию, по крайней мере в useQuery, но у меня почему-то каждый раз происходят новые запросы на сервер на одни и те же адреса

export const rootApi = createApi({
    reducerPath: 'root',
    tagTypes: ['root'],
    baseQuery: fetchBaseQuery({ baseUrl }),
    endpoints: (builder) => ({
        getTable: builder.mutation({
            query: (table) => `${table}`
        })
    })
});

export const { useGetTableMutation } = rootApi

[WbICHA]

MishaXXL, хз, я с редаксом так ещё ни разу полноценно и не работал.)

[Михаил Р.]

WbICHA, Вы много бдсм упустили

[MishaXXL]

WbICHA, я так понял вы по mobx больше )
А в нем какой инструмент используют для кэшировани данных запросов?
Что-то вроде axios пакета?
Все пакеты, что нашел по похожим словам mobx и request,cache выводят на пакеты с количеством скачиваний в 100 шт )

[WbICHA]

MishaXXL, да нет, с мобиксом я, по сути, тоже не работал. Так, помогал с типизацией немного.)
Я больше по реакт контексту. Ну и с зустандом и реакт квери работал.