Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: prevent flashing EmptyStateIndicator in ChannelList before the first channels page is loaded #2150

Merged

Conversation

MartinCupela
Copy link
Contributor

🎯 Goal

The EmptyStateIndicator was flashing before the first channels query used to be triggered. This is a strange UX.

This was happening because before the first query there were 0 channels loaded and channelsQueryState.queryInProgress was initialized with null what translates to valid state of channels query returning 0 channels.

🛠 Implementation details

This PR introduces a new state / value for ChatContext.channelsQueryState.queryInProgress and that is 'uninitialized'. We cannot use 'reload' as the first value for queryInProgress state , because the Channel component also relies on this status. If the Channel was not rendered with ChannelList the state would never transition to null (done inside ChannelList) thus never rendering the Channel contents.

With this PR, the 'uninitialized' state would translate into rendering LoadingIndicator in the ChannelList. The new state, however, would not be reflected in the Channel (again, because of the possibility of rendering the Channel without ChannelList).

@github-actions
Copy link

Size Change: +139 B (0%)

Total Size: 1.9 MB

Filename Size Change
./dist/browser.full-bundle.js 744 kB +25 B (0%)
./dist/browser.full-bundle.min.js 451 kB +33 B (0%)
./dist/components/ChannelList/ChannelList.js 2.95 kB +38 B (+1%)
./dist/components/Chat/hooks/useChannelsQueryState.js 212 B +15 B (+8%) 🔍
./dist/index.cjs.js 360 kB +28 B (0%)
ℹ️ View Unchanged
Filename Size
./dist/components/Attachment/attachment-sizing.js 1.08 kB
./dist/components/Attachment/Attachment.js 1.01 kB
./dist/components/Attachment/AttachmentActions.js 472 B
./dist/components/Attachment/AttachmentContainer.js 2.09 kB
./dist/components/Attachment/Audio.js 1.64 kB
./dist/components/Attachment/Card.js 1.76 kB
./dist/components/Attachment/DownloadButton.js 259 B
./dist/components/Attachment/FileAttachment.js 555 B
./dist/components/Attachment/FileSizeIndicator.js 240 B
./dist/components/Attachment/hooks/useAudioController.js 612 B
./dist/components/Attachment/icons.js 573 B
./dist/components/Attachment/index.js 109 B
./dist/components/Attachment/UnsupportedAttachment.js 267 B
./dist/components/Attachment/utils.js 1.65 kB
./dist/components/AutoCompleteTextarea/Header.js 332 B
./dist/components/AutoCompleteTextarea/index.js 157 B
./dist/components/AutoCompleteTextarea/Item.js 497 B
./dist/components/AutoCompleteTextarea/List.js 1.48 kB
./dist/components/AutoCompleteTextarea/Textarea.js 6.58 kB
./dist/components/AutoCompleteTextarea/types.js 31 B
./dist/components/AutoCompleteTextarea/utils.js 834 B
./dist/components/Avatar/Avatar.js 740 B
./dist/components/Avatar/index.js 46 B
./dist/components/Channel/Channel.js 8.04 kB
./dist/components/Channel/channelState.js 1.04 kB
./dist/components/Channel/emojiData.js 464 B
./dist/components/Channel/hooks/useChannelContainerClasses.js 353 B
./dist/components/Channel/hooks/useCreateChannelStateContext.js 1.49 kB
./dist/components/Channel/hooks/useCreateTypingContext.js 194 B
./dist/components/Channel/hooks/useEditMessageHandler.js 252 B
./dist/components/Channel/hooks/useIsMounted.js 168 B
./dist/components/Channel/hooks/useMentionsHandlers.js 422 B
./dist/components/Channel/index.js 117 B
./dist/components/Channel/LoadingChannel.js 360 B
./dist/components/Channel/utils.js 339 B
./dist/components/ChannelHeader/ChannelHeader.js 896 B
./dist/components/ChannelHeader/icons.js 458 B
./dist/components/ChannelHeader/index.js 53 B
./dist/components/ChannelList/ChannelListMessenger.js 448 B
./dist/components/ChannelList/hooks/index.js 196 B
./dist/components/ChannelList/hooks/useChannelDeletedListener.js 409 B
./dist/components/ChannelList/hooks/useChannelHiddenListener.js 408 B
./dist/components/ChannelList/hooks/useChannelTruncatedListener.js 338 B
./dist/components/ChannelList/hooks/useChannelUpdatedListener.js 572 B
./dist/components/ChannelList/hooks/useChannelVisibleListener.js 574 B
./dist/components/ChannelList/hooks/useConnectionRecoveredListener.js 236 B
./dist/components/ChannelList/hooks/useMessageNewListener.js 509 B
./dist/components/ChannelList/hooks/useMobileNavigation.js 276 B
./dist/components/ChannelList/hooks/useNotificationAddedToChannelListener.js 784 B
./dist/components/ChannelList/hooks/useNotificationMessageNewListener.js 661 B
./dist/components/ChannelList/hooks/useNotificationRemovedFromChannelListener.js 369 B
./dist/components/ChannelList/hooks/usePaginatedChannels.js 1.39 kB
./dist/components/ChannelList/hooks/useUserPresenceChangedListener.js 424 B
./dist/components/ChannelList/index.js 78 B
./dist/components/ChannelList/utils.js 314 B
./dist/components/ChannelPreview/ChannelPreview.js 908 B
./dist/components/ChannelPreview/ChannelPreviewMessenger.js 881 B
./dist/components/ChannelPreview/hooks/index.js 97 B
./dist/components/ChannelPreview/hooks/useChannelPreviewInfo.js 431 B
./dist/components/ChannelPreview/hooks/useIsChannelMuted.js 280 B
./dist/components/ChannelPreview/hooks/useMessageDeliveryStatus.js 829 B
./dist/components/ChannelPreview/index.js 81 B
./dist/components/ChannelPreview/utils.js 695 B
./dist/components/ChannelSearch/ChannelSearch.js 1.11 kB
./dist/components/ChannelSearch/hooks/useChannelSearch.js 2.2 kB
./dist/components/ChannelSearch/icons.js 701 B
./dist/components/ChannelSearch/index.js 85 B
./dist/components/ChannelSearch/SearchBar.js 1.29 kB
./dist/components/ChannelSearch/SearchInput.js 335 B
./dist/components/ChannelSearch/SearchResults.js 1.54 kB
./dist/components/ChannelSearch/utils.js 89 B
./dist/components/Chat/Chat.js 933 B
./dist/components/Chat/hooks/useChat.js 1.42 kB
./dist/components/Chat/hooks/useCreateChatContext.js 628 B
./dist/components/Chat/hooks/useCustomStyles.js 649 B
./dist/components/Chat/index.js 71 B
./dist/components/ChatAutoComplete/ChatAutoComplete.js 1.06 kB
./dist/components/ChatAutoComplete/index.js 56 B
./dist/components/ChatDown/ChatDown.js 530 B
./dist/components/ChatDown/icons.js 1.26 kB
./dist/components/ChatDown/index.js 48 B
./dist/components/CommandItem/CommandItem.js 265 B
./dist/components/CommandItem/index.js 51 B
./dist/components/DateSeparator/DateSeparator.js 514 B
./dist/components/DateSeparator/index.js 53 B
./dist/components/EmoticonItem/EmoticonItem.js 417 B
./dist/components/EmoticonItem/index.js 52 B
./dist/components/EmptyStateIndicator/EmptyStateIndicator.js 458 B
./dist/components/EmptyStateIndicator/icons.js 323 B
./dist/components/EmptyStateIndicator/index.js 59 B
./dist/components/EventComponent/EventComponent.js 831 B
./dist/components/EventComponent/index.js 52 B
./dist/components/Gallery/Gallery.js 1.05 kB
./dist/components/Gallery/Image.js 638 B
./dist/components/Gallery/index.js 64 B
./dist/components/Gallery/ModalGallery.js 341 B
./dist/components/index.js 307 B
./dist/components/InfiniteScrollPaginator/index.js 54 B
./dist/components/InfiniteScrollPaginator/InfiniteScroll.js 1.36 kB
./dist/components/Loading/index.js 76 B
./dist/components/Loading/LoadingChannels.js 285 B
./dist/components/Loading/LoadingErrorIndicator.js 366 B
./dist/components/Loading/LoadingIndicator.js 671 B
./dist/components/LoadMore/index.js 68 B
./dist/components/LoadMore/LoadMoreButton.js 479 B
./dist/components/LoadMore/LoadMorePaginator.js 444 B
./dist/components/Message/FixedHeightMessage.js 1.7 kB
./dist/components/Message/hooks/index.js 134 B
./dist/components/Message/hooks/useActionHandler.js 751 B
./dist/components/Message/hooks/useDeleteHandler.js 611 B
./dist/components/Message/hooks/useEditHandler.js 300 B
./dist/components/Message/hooks/useFlagHandler.js 753 B
./dist/components/Message/hooks/useMentionsHandler.js 387 B
./dist/components/Message/hooks/useMuteHandler.js 941 B
./dist/components/Message/hooks/useOpenThreadHandler.js 266 B
./dist/components/Message/hooks/usePinHandler.js 930 B
./dist/components/Message/hooks/useReactionHandler.js 2.12 kB
./dist/components/Message/hooks/useRetryHandler.js 343 B
./dist/components/Message/hooks/useUserHandler.js 223 B
./dist/components/Message/hooks/useUserRole.js 735 B
./dist/components/Message/icons.js 1.63 kB
./dist/components/Message/index.js 162 B
./dist/components/Message/Message.js 1.99 kB
./dist/components/Message/MessageDeleted.js 374 B
./dist/components/Message/MessageOptions.js 900 B
./dist/components/Message/MessageRepliesCountButton.js 523 B
./dist/components/Message/MessageSimple.js 2.27 kB
./dist/components/Message/MessageStatus.js 1.23 kB
./dist/components/Message/MessageText.js 1.06 kB
./dist/components/Message/MessageTimestamp.js 546 B
./dist/components/Message/QuotedMessage.js 817 B
./dist/components/Message/renderText/Anchor.js 327 B
./dist/components/Message/renderText/Emoji.js 173 B
./dist/components/Message/renderText/index.js 143 B
./dist/components/Message/renderText/Mention.js 195 B
./dist/components/Message/renderText/regex.js 374 B
./dist/components/Message/renderText/rehypePlugins.js 1.07 kB
./dist/components/Message/renderText/renderText.js 1.94 kB
./dist/components/Message/types.js 31 B
./dist/components/Message/utils.js 2.76 kB
./dist/components/MessageActions/index.js 62 B
./dist/components/MessageActions/MessageActions.js 1.32 kB
./dist/components/MessageActions/MessageActionsBox.js 1.33 kB
./dist/components/MessageInput/AttachmentPreviewList.js 1.07 kB
./dist/components/MessageInput/CooldownTimer.js 341 B
./dist/components/MessageInput/DefaultTriggerProvider.js 439 B
./dist/components/MessageInput/DropzoneProvider.js 548 B
./dist/components/MessageInput/EditMessageForm.js 1.17 kB
./dist/components/MessageInput/EmojiPicker.js 619 B
./dist/components/MessageInput/hooks/index.js 78 B
./dist/components/MessageInput/hooks/useAttachments.js 976 B
./dist/components/MessageInput/hooks/useCommandTrigger.js 759 B
./dist/components/MessageInput/hooks/useCooldownTimer.js 760 B
./dist/components/MessageInput/hooks/useCreateMessageInputContext.js 1.49 kB
./dist/components/MessageInput/hooks/useEmojiIndex.js 268 B
./dist/components/MessageInput/hooks/useEmojiPicker.js 766 B
./dist/components/MessageInput/hooks/useEmojiTrigger.js 500 B
./dist/components/MessageInput/hooks/useFileState.js 169 B
./dist/components/MessageInput/hooks/useFileUploads.js 1.22 kB
./dist/components/MessageInput/hooks/useImageUploads.js 1.33 kB
./dist/components/MessageInput/hooks/useLinkPreviews.js 1.37 kB
./dist/components/MessageInput/hooks/useMessageInputState.js 3.03 kB
./dist/components/MessageInput/hooks/useMessageInputText.js 917 B
./dist/components/MessageInput/hooks/usePasteHandler.js 830 B
./dist/components/MessageInput/hooks/useSubmitHandler.js 2.53 kB
./dist/components/MessageInput/hooks/useUserTrigger.js 1.88 kB
./dist/components/MessageInput/hooks/utils.js 1.69 kB
./dist/components/MessageInput/icons.js 2.84 kB
./dist/components/MessageInput/index.js 176 B
./dist/components/MessageInput/LinkPreviewList.js 778 B
./dist/components/MessageInput/MessageInput.js 585 B
./dist/components/MessageInput/MessageInputFlat.js 2.71 kB
./dist/components/MessageInput/MessageInputSmall.js 1.78 kB
./dist/components/MessageInput/QuotedMessagePreview.js 916 B
./dist/components/MessageInput/types.js 387 B
./dist/components/MessageInput/UploadsPreview.js 871 B
./dist/components/MessageList/ConnectionStatus.js 457 B
./dist/components/MessageList/CustomNotification.js 293 B
./dist/components/MessageList/GiphyPreviewMessage.js 197 B
./dist/components/MessageList/hooks/index.js 183 B
./dist/components/MessageList/hooks/MessageList/index.js 108 B
./dist/components/MessageList/hooks/MessageList/useEnrichedMessages.js 646 B
./dist/components/MessageList/hooks/MessageList/useMessageListElements.js 1.04 kB
./dist/components/MessageList/hooks/MessageList/useMessageListScrollManager.js 916 B
./dist/components/MessageList/hooks/MessageList/useScrollLocationLogic.js 887 B
./dist/components/MessageList/hooks/useLastReadData.js 266 B
./dist/components/MessageList/hooks/VirtualizedMessageList/index.js 141 B
./dist/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.js 381 B
./dist/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.js 388 B
./dist/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.js 691 B
./dist/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.js 1.21 kB
./dist/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.js 428 B
./dist/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.js 384 B
./dist/components/MessageList/icons.js 368 B
./dist/components/MessageList/index.js 172 B
./dist/components/MessageList/MessageList.js 2.84 kB
./dist/components/MessageList/MessageListMainPanel.js 258 B
./dist/components/MessageList/MessageListNotifications.js 455 B
./dist/components/MessageList/MessageNotification.js 293 B
./dist/components/MessageList/ScrollToBottomButton.js 1.08 kB
./dist/components/MessageList/utils.js 2.78 kB
./dist/components/MessageList/VirtualizedMessageList.js 3.86 kB
./dist/components/MessageList/VirtualizedMessageListComponents.js 1.62 kB
./dist/components/MML/index.js 43 B
./dist/components/MML/MML.js 535 B
./dist/components/Modal/icons.js 435 B
./dist/components/Modal/index.js 45 B
./dist/components/Modal/Modal.js 776 B
./dist/components/ReactFileUtilities/FileIcon/FileIcon.js 536 B
./dist/components/ReactFileUtilities/FileIcon/FileIconSet/v1.js 2.73 kB
./dist/components/ReactFileUtilities/FileIcon/FileIconSet/v2.js 5.46 kB
./dist/components/ReactFileUtilities/FileIcon/iconMap.js 800 B
./dist/components/ReactFileUtilities/FileIcon/index.js 53 B
./dist/components/ReactFileUtilities/FileIcon/mimeTypes.js 834 B
./dist/components/ReactFileUtilities/FilePreviewer.js 634 B
./dist/components/ReactFileUtilities/FileUploadButton.js 501 B
./dist/components/ReactFileUtilities/IconButton.js 273 B
./dist/components/ReactFileUtilities/icons/AttachmentIcon.js 397 B
./dist/components/ReactFileUtilities/icons/CloseIcon.js 560 B
./dist/components/ReactFileUtilities/icons/FilePlaceholderIcon.js 1.52 kB
./dist/components/ReactFileUtilities/icons/index.js 96 B
./dist/components/ReactFileUtilities/icons/PictureIcon.js 333 B
./dist/components/ReactFileUtilities/icons/RetryIcon.js 325 B
./dist/components/ReactFileUtilities/ImageDropzone.js 981 B
./dist/components/ReactFileUtilities/ImagePreviewer.js 737 B
./dist/components/ReactFileUtilities/ImageUploadButton.js 430 B
./dist/components/ReactFileUtilities/index.js 177 B
./dist/components/ReactFileUtilities/LoadingIndicator.js 307 B
./dist/components/ReactFileUtilities/Thumbnail.js 468 B
./dist/components/ReactFileUtilities/ThumbnailPlaceholder.js 384 B
./dist/components/ReactFileUtilities/types.js 31 B
./dist/components/ReactFileUtilities/UploadButton.js 289 B
./dist/components/ReactFileUtilities/utils.js 1.21 kB
./dist/components/Reactions/hooks/useProcessReactions.js 1.06 kB
./dist/components/Reactions/index.js 74 B
./dist/components/Reactions/ReactionSelector.js 2.05 kB
./dist/components/Reactions/ReactionsList.js 1.31 kB
./dist/components/Reactions/SimpleReactionsList.js 1.46 kB
./dist/components/Reactions/utils/utils.js 116 B
./dist/components/SafeAnchor/index.js 74 B
./dist/components/SafeAnchor/SafeAnchor.js 304 B
./dist/components/Thread/icons.js 370 B
./dist/components/Thread/index.js 71 B
./dist/components/Thread/Thread.js 1.43 kB
./dist/components/Thread/ThreadHead.js 314 B
./dist/components/Thread/ThreadHeader.js 460 B
./dist/components/Thread/ThreadStart.js 283 B
./dist/components/Tooltip/hooks/index.js 61 B
./dist/components/Tooltip/hooks/useEnterLeaveHandlers.js 305 B
./dist/components/Tooltip/index.js 47 B
./dist/components/Tooltip/Tooltip.js 478 B
./dist/components/TypingIndicator/index.js 55 B
./dist/components/TypingIndicator/TypingIndicator.js 1.22 kB
./dist/components/UserItem/index.js 48 B
./dist/components/UserItem/UserItem.js 628 B
./dist/components/Window/index.js 46 B
./dist/components/Window/Window.js 372 B
./dist/constants/limits.js 96 B
./dist/constants/messageTypes.js 99 B
./dist/context/ChannelActionContext.js 588 B
./dist/context/ChannelStateContext.js 586 B
./dist/context/ChatContext.js 573 B
./dist/context/ComponentContext.js 579 B
./dist/context/DefaultEmoji.js 119 B
./dist/context/DefaultEmojiPicker.js 124 B
./dist/context/EmojiContext.js 800 B
./dist/context/index.js 123 B
./dist/context/MessageContext.js 580 B
./dist/context/MessageInputContext.js 350 B
./dist/context/TranslationContext.js 783 B
./dist/context/TypingContext.js 581 B
./dist/context/utils/getDisplayName.js 102 B
./dist/css/index.css 28.4 kB
./dist/css/v2/index.css 20 kB
./dist/css/v2/index.layout.css 7.58 kB
./dist/i18n/de.json 1.62 kB
./dist/i18n/en.json 1.1 kB
./dist/i18n/es.json 1.64 kB
./dist/i18n/fr.json 1.66 kB
./dist/i18n/hi.json 1.82 kB
./dist/i18n/index.js 67 B
./dist/i18n/it.json 1.63 kB
./dist/i18n/ja.json 1.81 kB
./dist/i18n/ko.json 1.76 kB
./dist/i18n/nl.json 1.56 kB
./dist/i18n/pt.json 1.57 kB
./dist/i18n/ru.json 1.98 kB
./dist/i18n/Streami18n.js 5.77 kB
./dist/i18n/tr.json 1.58 kB
./dist/i18n/translations.js 172 B
./dist/i18n/utils.js 528 B
./dist/index.js 72 B
./dist/stream-emoji.json 53 kB
./dist/types/types.js 31 B
./dist/utils/browsers.js 156 B
./dist/utils/deprecationWarning.js 317 B
./dist/utils/generateRandomId.js 130 B
./dist/utils/getChannel.js 951 B
./dist/utils/getWholeChar.js 411 B
./dist/utils/index.js 79 B
./dist/version.js 60 B

compressed-size-action

@MartinCupela MartinCupela merged commit a2a9645 into master Oct 31, 2023
4 of 6 checks passed
@MartinCupela MartinCupela deleted the fix/prevent-empty-state-flash-in-channel-list-loading branch October 31, 2023 15:18
github-actions bot pushed a commit that referenced this pull request Oct 31, 2023
# [10.16.0](v10.15.0...v10.16.0) (2023-10-31)

### Bug Fixes

* prevent flashing EmptyStateIndicator in ChannelList before the first channels page is loaded ([#2150](#2150)) ([a2a9645](a2a9645))

### Features

* add commands translations ([#2149](#2149)) ([f55c86f](f55c86f))
@stream-ci-bot
Copy link
Collaborator

🎉 This PR is included in version 10.16.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

github-actions bot pushed a commit that referenced this pull request Nov 2, 2023
## [11.0.0-rc.3](v11.0.0-rc.2...v11.0.0-rc.3) (2023-11-02)

### Bug Fixes

* prevent flashing EmptyStateIndicator in ChannelList before the first channels page is loaded ([#2150](#2150)) ([a2a9645](a2a9645))

### Features

* add commands translations ([#2149](#2149)) ([f55c86f](f55c86f))

### Chores

* **deps:** bump @stream-io/stream-chat-css to v4-rc ([#2153](#2153)) ([030688f](030688f))
@stream-ci-bot
Copy link
Collaborator

🎉 This PR is included in version 11.0.0-rc.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants