Show Skeleton when changing chats

app/soapbox/features/chats/components/chat-message-list.tsx

@@ -85,6 +85,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, autosize }) => {
     isFetchingNextPage,
     isLoading,
     isPlaceholderData,
+    hasNextPage,
     refetch,
   } = useChatMessages(chat.id);
   const formattedChatMessages = chatMessages || [];
@@ -154,7 +155,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, autosize }) => {
     // const maxId = chatMessages.getIn([0, 'id']) as string;
     // dispatch(fetchChatMessages(chat.id, maxId as any));
     // setIsLoading(true);
-    if (!isFetching) {
+    if (!isFetching && hasNextPage) {
       // setMaxId(formattedChatMessages[0].id);
       fetchNextPage()
         .then(() => {

app/soapbox/queries/chats.ts

@@ -82,7 +82,6 @@ const useChatMessages = (chatId: string) => {
   };
 
   const queryInfo = useInfiniteQuery(chatKeys.chatMessages(chatId), ({ pageParam }) => getChatMessages(chatId, pageParam), {
-    keepPreviousData: true,
     getNextPageParam: (config) => {
       if (config.hasMore) {
         return { link: config.link };