fixes for message loading spinner

spacebarchat · Aug 26, 2023 · 17ef8d7 · 17ef8d7
1 parent c5a7ff2
commit 17ef8d7
Showing 1 changed file with 29 additions and 26 deletions.
diff --git a/src/components/messaging/MessageList.tsx b/src/components/messaging/MessageList.tsx
@@ -62,32 +62,35 @@ function MessageList({ guild, channel }: Props) {
 
 	return (
 		<Container id="scrollable-div">
-			<InfiniteScroll
-				dataLength={channel.messages.grouped.length}
-				next={fetchMore}
-				style={{ display: "flex", flexDirection: "column-reverse" }} // to put endMessage and loader to the top.
-				hasMore={hasMore}
-				loader={
-					<PulseLoader
-						style={{ display: "flex", justifyContent: "center", alignContent: "center" }}
-						color="var(--primary)"
-					/>
-				}
-				scrollableTarget="scrollable-div"
-				endMessage={
-					<EndMessageContainer>
-						<h1 style={{ fontWeight: 700, margin: "8px 0" }}>Welcome to #{channel.name}!</h1>
-						<p style={{ color: "var(--text-secondary)" }}>
-							This is the start of the #{channel.name} channel.
-						</p>
-						<HorizontalDivider />
-					</EndMessageContainer>
-				}
-			>
-				{channel.messages.grouped.map((group, index) => {
-					return <MessageGroup key={index} messages={group} />;
-				})}
-			</InfiniteScroll>
+			{channel.messages.count === 0 ? (
+				<PulseLoader style={{ display: "flex", justifyContent: "center" }} color="var(--primary)" />
+			) : (
+				<>
+					<InfiniteScroll
+						dataLength={channel.messages.grouped.length}
+						next={fetchMore}
+						style={{ display: "flex", flexDirection: "column-reverse" }} // to put endMessage and loader to the top.
+						hasMore={hasMore}
+						loader={
+							<PulseLoader style={{ display: "flex", justifyContent: "center" }} color="var(--primary)" />
+						}
+						scrollableTarget="scrollable-div"
+						endMessage={
+							<EndMessageContainer>
+								<h1 style={{ fontWeight: 700, margin: "8px 0" }}>Welcome to #{channel.name}!</h1>
+								<p style={{ color: "var(--text-secondary)" }}>
+									This is the start of the #{channel.name} channel.
+								</p>
+								<HorizontalDivider />
+							</EndMessageContainer>
+						}
+					>
+						{channel.messages.grouped.map((group, index) => {
+							return <MessageGroup key={index} messages={group} />;
+						})}
+					</InfiniteScroll>
+				</>
+			)}
 		</Container>
 	);
 }