Show loading only for the first time

[chertik77]

export const Board = () => {
  const { data, isLoading } = useGetBoardById()

  return (
    <ScrollArea.Root
      type='scroll'
      className='relative flex flex-col overflow-hidden bg-cover bg-center px-5 pt-3.5
        tablet:px-8 tablet:pt-xl desktop:px-6 desktop:pt-sm'
      style={{
        backgroundImage: `url(${!isLoading && data?.background?.url})`
      }}>
      <div
        className={cn(
          'mb-[39px] flex justify-between text-black tablet:mb-xl desktop:mb-sm',
          data?.background.hasWhiteTextColor && 'text-white',
          data?.background.identifier === 'default' && 'dark:text-white'
        )}>
        <p className='tablet:text-lg'>{data?.title}</p>
        {!isLoading && <Filters />}
      </div>
      <ScrollArea.Viewport className='w-full flex-1 pb-4'>
        {isLoading ? (
          <Loader className='absolute inset-0 m-auto' />
        ) : (
          <BoardColumnsList
            columns={data?.columns}
            backgroundIdentifier={data?.background.identifier}
          />
        )}
      </ScrollArea.Viewport>
      <Scrollbar
        backgroundIdentifier={data?.background.identifier}
        scrollBarClassName='mx-5 mb-2 h-3 tablet:mx-8 desktop:mx-6'
        thumbClassName='!h-3'
        orientation='horizontal'
      />
    </ScrollArea.Root>
  )
}

export const useGetBoardById = () => {
  const boardId = useGetBoardId()

  const { cardPriority } = useCardFiltersBySearchParams()

  return useQuery({
    queryKey: ['board', boardId, cardPriority],
    queryFn: () =>
      boardService.getBoardById(boardId!, { priority: cardPriority }),
    enabled: !!boardId
  })
}

I get a loader when board initially loads, and when I'm changing cardPriority for filtering cards in columns - I don't want to see the loader again, any ideas?

[TkDodo]

when your queryKey changes, you’re going to observe a new query that doesn’t have any previous data, so you’ll get a hard loading state. To continue observing data from previous cache entries, we have placeholderData:

  return useQuery({
    queryKey: ['board', boardId, cardPriority],
    queryFn: () =>
      boardService.getBoardById(boardId!, { priority: cardPriority }),
    enabled: !!boardId,
    placeholderData: (prev) => prev
  })

You can also import keepPreviousData from @tanstack/react-query and set:

placeholderData: keepPreviouData

if you prefer that. it does the same thing.

[chertik77]

Thank you so much!

[chertik77]

when your queryKey changes, you’re going to observe a new query that doesn’t have any previous data, so you’ll get a hard loading state. To continue observing data from previous cache entries, we have placeholderData:

  return useQuery({
    queryKey: ['board', boardId, cardPriority],
    queryFn: () =>
      boardService.getBoardById(boardId!, { priority: cardPriority }),
    enabled: !!boardId,
    placeholderData: (prev) => prev
  })

You can also import keepPreviousData from @tanstack/react-query and set:

placeholderData: keepPreviouData

if you prefer that. it does the same thing.

does it slow down the actual filtering? because before it it happened quickly, is there any optimistic updates but for useQuery? Thanks in advance.

[TkDodo]

Not sure what you mean by slowdown ?

[chertik77]

Not sure what you mean by slowdown ?

filtering is a bit slow now, i mean it's require extra second for the first time. Just wondering

[TkDodo]

Shouldn't be. Please show a stackblitz or codesandbox reproduction so that I can look into it