fetching messages state

app/features/core/components/phone-init-loader.tsx

@@ -16,6 +16,7 @@ export default function PhoneInitLoader() {
 			</svg>
 			<p>We&#39;re finalizing your &#128026;phone initialization.</p>
 			<p>
+				{/* TODO */}
 				You don&#39;t have to refresh this page, we will do it automatically for you when your phone is ready.
 			</p>
 		</div>

app/features/messages/components/conversations-list.tsx

@@ -8,9 +8,9 @@ import EmptyMessages from "./empty-messages";
 import type { MessagesLoaderData } from "~/features/messages/loaders/messages";
 
 export default function ConversationsList() {
-	const { conversations } = useLoaderData<MessagesLoaderData>();
+	const { conversations, isFetchingMessages } = useLoaderData<MessagesLoaderData>();
 
-	if (!conversations) {
+	if (isFetchingMessages || !conversations) {
 		// we're still importing messages from twilio
 		return <PhoneInitLoader />;
 	}

app/features/messages/loaders/messages.ts

@@ -1,13 +1,14 @@
 import type { LoaderFunction } from "@remix-run/node";
 import { json } from "superjson-remix";
 import { parsePhoneNumber } from "awesome-phonenumber";
-import { type Message, Prisma } from "@prisma/client";
+import { type Message, type PhoneNumber, Prisma } from "@prisma/client";
 
 import db from "~/utils/db.server";
-import { requireLoggedIn, type SessionData } from "~/utils/auth.server";
+import { requireLoggedIn } from "~/utils/auth.server";
 
 export type MessagesLoaderData = {
-	user: { hasPhoneNumber: boolean };
+	hasPhoneNumber: boolean;
+	isFetchingMessages: boolean | null;
 	conversations: Conversations | undefined;
 };
 
@@ -18,9 +19,15 @@ type Conversation = {
 };
 
 const loader: LoaderFunction = async ({ request }) => {
-	const { phoneNumber } = await requireLoggedIn(request);
+	const sessionData = await requireLoggedIn(request);
+	const phoneNumber =
+		sessionData.phoneNumber &&
+		(await db.phoneNumber.findUnique({
+			where: { id: sessionData.phoneNumber.id },
+		}));
 	return json<MessagesLoaderData>({
-		user: { hasPhoneNumber: Boolean(phoneNumber) },
+		hasPhoneNumber: Boolean(phoneNumber),
+		isFetchingMessages: phoneNumber?.isFetchingMessages ?? null,
 		conversations: await getConversations(phoneNumber),
 	});
 };
@@ -29,13 +36,8 @@ export default loader;
 
 type Conversations = Record<string, Conversation>;
 
-async function getConversations(sessionPhoneNumber: SessionData["phoneNumber"]) {
-	if (!sessionPhoneNumber) {
-		return;
-	}
-
-	const phoneNumber = await db.phoneNumber.findUnique({ where: { id: sessionPhoneNumber.id } });
-	if (!phoneNumber || phoneNumber.isFetchingMessages) {
+async function getConversations(phoneNumber: PhoneNumber | null) {
+	if (!phoneNumber) {
 		return;
 	}
 

app/routes/__app/messages.tsx

@@ -1,3 +1,4 @@
+import type { MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "superjson-remix";
 import { atom, useAtom } from "jotai";
 
@@ -7,14 +8,19 @@ import MissingTwilioCredentials from "~/features/core/components/missing-twilio-
 import ConversationsList from "~/features/messages/components/conversations-list";
 import NewMessageButton from "~/features/messages/components/new-message-button";
 import NewMessageBottomSheet from "~/features/messages/components/new-message-bottom-sheet";
+import { getSeoMeta } from "~/utils/seo";
+
+export const meta: MetaFunction = () => ({
+	...getSeoMeta({ title: "Messages" }),
+});
 
 export const loader = messagesLoader;
 
 export default function MessagesPage() {
-	const { user } = useLoaderData<MessagesLoaderData>();
+	const { hasPhoneNumber } = useLoaderData<MessagesLoaderData>();
 	const setIsNewMessageSheetOpen = useAtom(bottomSheetOpenAtom)[1];
 
-	if (!user.hasPhoneNumber) {
+	if (!hasPhoneNumber) {
 		return (
 			<>
 				<MissingTwilioCredentials />