add import messages/calls ui feedback

app/messages/api/queue/insert-messages.ts

@@ -37,6 +37,22 @@ const insertMessagesQueue = Queue<Payload>(
 			.sort((a, b) => a.sentAt.getTime() - b.sentAt.getTime());
 
 		await db.message.createMany({ data: sms, skipDuplicates: true });
+
+		const processingState = await db.processingPhoneNumber.findFirst({ where: { organizationId, phoneNumberId } });
+		if (!processingState) {
+			return;
+		}
+
+		if (processingState.hasFetchedCalls) {
+			await db.processingPhoneNumber.delete({
+				where: { organizationId_phoneNumberId: { organizationId, phoneNumberId } },
+			});
+		} else {
+			await db.processingPhoneNumber.update({
+				where: { organizationId_phoneNumberId: { organizationId, phoneNumberId } },
+				data: { hasFetchedMessages: true },
+			});
+		}
 	},
 );
 

app/messages/components/conversations-list.tsx

@@ -3,9 +3,22 @@ import { IoChevronForward } from "react-icons/io5";
 
 import getConversationsQuery from "../queries/get-conversations";
 import { formatRelativeDate } from "../../core/helpers/date-formatter";
+import { useEffect } from "react";
+import PhoneInitLoader from "../../core/components/phone-init-loader";
 
 export default function ConversationsList() {
-	const conversations = useQuery(getConversationsQuery, {})[0];
+	const [conversations, query] = useQuery(getConversationsQuery, {});
+
+	useEffect(() => {
+		if (!conversations) {
+			const pollInterval = setInterval(() => query.refetch(), 1500);
+			return () => clearInterval(pollInterval);
+		}
+	}, [conversations, query]);
+
+	if (!conversations) {
+		return <PhoneInitLoader />;
+	}
 
 	if (Object.keys(conversations).length === 0) {
 		return <div>empty state</div>;

app/messages/pages/messages.tsx

@@ -26,9 +26,11 @@ const Messages: BlitzPage = () => {
 			<div className="flex flex-col space-y-6 p-3">
 				<h2 className="text-3xl font-bold">Messages</h2>
 			</div>
-			<Suspense fallback="Loading...">
-				<ConversationsList />
-			</Suspense>
+			<section className="flex flex-grow flex-col">
+				<Suspense fallback="Loading...">
+					<ConversationsList />
+				</Suspense>
+			</section>
 			<NewMessageButton onClick={() => setIsOpen(true)} />
 			<NewMessageBottomSheet />
 		</>

app/messages/queries/get-conversations.ts

@@ -27,6 +27,12 @@ export default resolver.pipe(
 		}
 
 		const phoneNumberId = organization.phoneNumbers[0]!.id;
+
+		const processingState = await db.processingPhoneNumber.findFirst({ where: { organizationId, phoneNumberId } });
+		if (processingState && !processingState.hasFetchedMessages) {
+			return;
+		}
+
 		const messages = await db.message.findMany({
 			where: { organizationId, phoneNumberId },
 			orderBy: { sentAt: Prisma.SortOrder.desc },