From a05d8cc413d2051475e820b6b1a9ad3eed4f47fe Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Sun, 22 May 2022 01:59:38 +0200
Subject: [PATCH] fetching calls state

---
 .../core/components/inactive-subscription.tsx |   2 +-
 .../components/phone-calls-list.tsx           |  23 +-
 app/features/phone-calls/loaders/calls.ts     | 312 +++++++++++++++++
 app/routes/__app/calls.tsx                    | 330 +-----------------
 4 files changed, 337 insertions(+), 330 deletions(-)
 create mode 100644 app/features/phone-calls/loaders/calls.ts

diff --git a/app/features/core/components/inactive-subscription.tsx b/app/features/core/components/inactive-subscription.tsx
index 66c5e10..800498a 100644
--- a/app/features/core/components/inactive-subscription.tsx
+++ b/app/features/core/components/inactive-subscription.tsx
@@ -16,7 +16,7 @@ export default function InactiveSubscription() {
 					<p className="mt-1 text-sm text-gray-500 max-w-sm mx-auto break-normal whitespace-normal">
 						You need an active subscription to use this feature.
 						<br />
-						Head over to your settings to pick up a plan.
+						Head over to your settings to pick a plan.
 					</p>
 					<div className="mt-6">
 						<button
diff --git a/app/features/phone-calls/components/phone-calls-list.tsx b/app/features/phone-calls/components/phone-calls-list.tsx
index 463f2c2..4587ebb 100644
--- a/app/features/phone-calls/components/phone-calls-list.tsx
+++ b/app/features/phone-calls/components/phone-calls-list.tsx
@@ -7,18 +7,23 @@ import { Direction, CallStatus } from "@prisma/client";
 import PhoneInitLoader from "~/features/core/components/phone-init-loader";
 import EmptyCalls from "../components/empty-calls";
 import { formatRelativeDate } from "~/features/core/helpers/date-formatter";
-import type { PhoneCallsLoaderData } from "~/routes/__app/calls";
+import type { PhoneCallsLoaderData } from "~/features/phone-calls/loaders/calls";
 
 export default function PhoneCallsList() {
-	const { hasOngoingSubscription } = { hasOngoingSubscription: false };
-	const { phoneCalls } = useLoaderData<PhoneCallsLoaderData>();
+	const { hasOngoingSubscription, isFetchingCalls, phoneCalls } = useLoaderData<PhoneCallsLoaderData>();
 
-	if (!phoneCalls) {
-		return hasOngoingSubscription ? <PhoneInitLoader /> : null;
-	}
+	if (!hasOngoingSubscription) {
+		if (!phoneCalls || phoneCalls.length === 0) {
+			return null;
+		}
+	} else {
+		if (isFetchingCalls || !phoneCalls) {
+			return <PhoneInitLoader />;
+		}
 
-	if (phoneCalls.length === 0) {
-		return hasOngoingSubscription ? <EmptyCalls /> : null;
+		if (phoneCalls.length === 0) {
+			return hasOngoingSubscription ? <EmptyCalls /> : null;
+		}
 	}
 
 	return (
@@ -30,7 +35,7 @@ export default function PhoneCallsList() {
 				const formattedRecipient = isOutboundCall
 					? phoneCall.toMeta.formattedPhoneNumber
 					: phoneCall.fromMeta.formattedPhoneNumber;
-				const recipient = isOutboundCall ? phoneCall.to : phoneCall.from;
+				const recipient = phoneCall.recipient;
 
 				return (
 					<li key={phoneCall.id} className="py-2 px-4 hover:bg-gray-200 hover:bg-opacity-50">
diff --git a/app/features/phone-calls/loaders/calls.ts b/app/features/phone-calls/loaders/calls.ts
new file mode 100644
index 0000000..6899cea
--- /dev/null
+++ b/app/features/phone-calls/loaders/calls.ts
@@ -0,0 +1,312 @@
+import { type LoaderFunction } from "@remix-run/node";
+import { json } from "superjson-remix";
+import { parsePhoneNumber } from "awesome-phonenumber";
+import { type PhoneCall, Prisma } from "@prisma/client";
+
+import db from "~/utils/db.server";
+import { requireLoggedIn } from "~/utils/auth.server";
+
+type PhoneCallMeta = {
+	formattedPhoneNumber: string;
+	country: string | "unknown";
+};
+
+export type PhoneCallsLoaderData = {
+	hasOngoingSubscription: boolean;
+	hasPhoneNumber: boolean;
+	isFetchingCalls: boolean | null;
+	phoneCalls: (PhoneCall & { toMeta: PhoneCallMeta; fromMeta: PhoneCallMeta })[] | undefined;
+};
+
+const loader: LoaderFunction = async ({ request }) => {
+	const sessionData = await requireLoggedIn(request);
+	if (!sessionData.phoneNumber) {
+		throw new Error("unreachable");
+	}
+
+	const phoneNumber = await db.phoneNumber.findUnique({
+		where: { id: sessionData.phoneNumber.id },
+	});
+	if (!phoneNumber || phoneNumber.isFetchingCalls) {
+		return json<PhoneCallsLoaderData>({
+			hasOngoingSubscription: true, // TODO
+			hasPhoneNumber: Boolean(phoneNumber),
+			isFetchingCalls: true,
+			phoneCalls: undefined,
+		});
+	}
+
+	const phoneCalls = await db.phoneCall.findMany({
+		where: { phoneNumberId: phoneNumber.id },
+		orderBy: { createdAt: Prisma.SortOrder.desc },
+	});
+	return json<PhoneCallsLoaderData>({
+		hasOngoingSubscription: true, // TODO
+		hasPhoneNumber: Boolean(phoneNumber),
+		isFetchingCalls: null,
+		phoneCalls: phoneCalls.map((phoneCall) => ({
+			...phoneCall,
+			fromMeta: getPhoneNumberMeta(phoneCall.from),
+			toMeta: getPhoneNumberMeta(phoneCall.to),
+		})),
+	});
+};
+
+export default loader;
+
+function getPhoneNumberMeta(rawPhoneNumber: string) {
+	const countries: Record<string, string> = {
+		AF: "Afghanistan",
+		AL: "Albania",
+		DZ: "Algeria",
+		AS: "American Samoa",
+		AD: "Andorra",
+		AO: "Angola",
+		AI: "Anguilla",
+		AQ: "Antarctica",
+		AG: "Antigua and Barbuda",
+		AR: "Argentina",
+		AM: "Armenia",
+		AW: "Aruba",
+		AU: "Australia",
+		AT: "Austria",
+		AZ: "Azerbaijan",
+		BS: "Bahamas",
+		BH: "Bahrain",
+		BD: "Bangladesh",
+		BB: "Barbados",
+		BY: "Belarus",
+		BE: "Belgium",
+		BZ: "Belize",
+		BJ: "Benin",
+		BM: "Bermuda",
+		BT: "Bhutan",
+		BO: "Bolivia",
+		BA: "Bosnia and Herzegovina",
+		BW: "Botswana",
+		BV: "Bouvet Island",
+		BR: "Brazil",
+		IO: "British Indian Ocean Territory",
+		BN: "Brunei",
+		BG: "Bulgaria",
+		BF: "Burkina Faso",
+		BI: "Burundi",
+		KH: "Cambodia",
+		CM: "Cameroon",
+		CA: "Canada",
+		CV: "Cape Verde",
+		KY: "Cayman Islands",
+		CF: "Central African Republic",
+		TD: "Chad",
+		CL: "Chile",
+		CN: "China",
+		CX: "Christmas Island",
+		CC: "Cocos (Keeling) Islands",
+		CO: "Colombia",
+		KM: "Comoros",
+		CG: "Congo",
+		CD: "Congo, the Democratic Republic of the",
+		CK: "Cook Islands",
+		CR: "Costa Rica",
+		CI: "Ivory Coast",
+		HR: "Croatia",
+		CU: "Cuba",
+		CY: "Cyprus",
+		CZ: "Czech Republic",
+		DK: "Denmark",
+		DJ: "Djibouti",
+		DM: "Dominica",
+		DO: "Dominican Republic",
+		EC: "Ecuador",
+		EG: "Egypt",
+		SV: "El Salvador",
+		GQ: "Equatorial Guinea",
+		ER: "Eritrea",
+		EE: "Estonia",
+		ET: "Ethiopia",
+		FK: "Falkland Islands (Malvinas)",
+		FO: "Faroe Islands",
+		FJ: "Fiji",
+		FI: "Finland",
+		FR: "France",
+		GF: "French Guiana",
+		PF: "French Polynesia",
+		TF: "French Southern Territories",
+		GA: "Gabon",
+		GM: "Gambia",
+		GE: "Georgia",
+		DE: "Germany",
+		GH: "Ghana",
+		GI: "Gibraltar",
+		GR: "Greece",
+		GL: "Greenland",
+		GD: "Grenada",
+		GP: "Guadeloupe",
+		GU: "Guam",
+		GT: "Guatemala",
+		GG: "Guernsey",
+		GN: "Guinea",
+		GW: "Guinea-Bissau",
+		GY: "Guyana",
+		HT: "Haiti",
+		HM: "Heard Island and McDonald Islands",
+		VA: "Holy See (Vatican City State)",
+		HN: "Honduras",
+		HK: "Hong Kong",
+		HU: "Hungary",
+		IS: "Iceland",
+		IN: "India",
+		ID: "Indonesia",
+		IR: "Iran, Islamic Republic of",
+		IQ: "Iraq",
+		IE: "Ireland",
+		IM: "Isle of Man",
+		IL: "Israel",
+		IT: "Italy",
+		JM: "Jamaica",
+		JP: "Japan",
+		JE: "Jersey",
+		JO: "Jordan",
+		KZ: "Kazakhstan",
+		KE: "Kenya",
+		KI: "Kiribati",
+		KP: "Korea, Democratic People's Republic of",
+		KR: "South Korea",
+		KW: "Kuwait",
+		KG: "Kyrgyzstan",
+		LA: "Lao People's Democratic Republic",
+		LV: "Latvia",
+		LB: "Lebanon",
+		LS: "Lesotho",
+		LR: "Liberia",
+		LY: "Libya",
+		LI: "Liechtenstein",
+		LT: "Lithuania",
+		LU: "Luxembourg",
+		MO: "Macao",
+		MK: "Macedonia, the former Yugoslav Republic of",
+		MG: "Madagascar",
+		MW: "Malawi",
+		MY: "Malaysia",
+		MV: "Maldives",
+		ML: "Mali",
+		MT: "Malta",
+		MH: "Marshall Islands",
+		MQ: "Martinique",
+		MR: "Mauritania",
+		MU: "Mauritius",
+		YT: "Mayotte",
+		MX: "Mexico",
+		FM: "Micronesia, Federated States of",
+		MD: "Moldova, Republic of",
+		MC: "Monaco",
+		MN: "Mongolia",
+		ME: "Montenegro",
+		MS: "Montserrat",
+		MA: "Morocco",
+		MZ: "Mozambique",
+		MM: "Burma",
+		NA: "Namibia",
+		NR: "Nauru",
+		NP: "Nepal",
+		NL: "Netherlands",
+		AN: "Netherlands Antilles",
+		NC: "New Caledonia",
+		NZ: "New Zealand",
+		NI: "Nicaragua",
+		NE: "Niger",
+		NG: "Nigeria",
+		NU: "Niue",
+		NF: "Norfolk Island",
+		MP: "Northern Mariana Islands",
+		NO: "Norway",
+		OM: "Oman",
+		PK: "Pakistan",
+		PW: "Palau",
+		PS: "Palestinian Territory, Occupied",
+		PA: "Panama",
+		PG: "Papua New Guinea",
+		PY: "Paraguay",
+		PE: "Peru",
+		PH: "Philippines",
+		PN: "Pitcairn",
+		PL: "Poland",
+		PT: "Portugal",
+		PR: "Puerto Rico",
+		QA: "Qatar",
+		RE: "Réunion",
+		RO: "Romania",
+		RU: "Russia",
+		RW: "Rwanda",
+		SH: "Saint Helena, Ascension and Tristan da Cunha",
+		KN: "Saint Kitts and Nevis",
+		LC: "Saint Lucia",
+		PM: "Saint Pierre and Miquelon",
+		VC: "St. Vincent and the Grenadines",
+		WS: "Samoa",
+		SM: "San Marino",
+		ST: "Sao Tome and Principe",
+		SA: "Saudi Arabia",
+		SN: "Senegal",
+		RS: "Serbia",
+		SC: "Seychelles",
+		SL: "Sierra Leone",
+		SG: "Singapore",
+		SK: "Slovakia",
+		SI: "Slovenia",
+		SB: "Solomon Islands",
+		SO: "Somalia",
+		ZA: "South Africa",
+		GS: "South Georgia and the South Sandwich Islands",
+		SS: "South Sudan",
+		ES: "Spain",
+		LK: "Sri Lanka",
+		SD: "Sudan",
+		SR: "Suriname",
+		SJ: "Svalbard and Jan Mayen",
+		SZ: "Swaziland",
+		SE: "Sweden",
+		CH: "Switzerland",
+		SY: "Syrian Arab Republic",
+		TW: "Taiwan",
+		TJ: "Tajikistan",
+		TZ: "Tanzania, United Republic of",
+		TH: "Thailand",
+		TL: "Timor-Leste",
+		TG: "Togo",
+		TK: "Tokelau",
+		TO: "Tonga",
+		TT: "Trinidad and Tobago",
+		TN: "Tunisia",
+		TR: "Turkey",
+		TM: "Turkmenistan",
+		TC: "Turks and Caicos Islands",
+		TV: "Tuvalu",
+		UG: "Uganda",
+		UA: "Ukraine",
+		AE: "United Arab Emirates",
+		GB: "United Kingdom",
+		US: "United States",
+		UM: "United States Minor Outlying Islands",
+		UY: "Uruguay",
+		UZ: "Uzbekistan",
+		VU: "Vanuatu",
+		VE: "Venezuela",
+		VN: "Vietnam",
+		VG: "Virgin Islands, British",
+		VI: "Virgin Islands, U.S.",
+		WF: "Wallis and Futuna",
+		EH: "Western Sahara",
+		YE: "Yemen",
+		ZM: "Zambia",
+		ZW: "Zimbabwe",
+	};
+	const phoneNumber = parsePhoneNumber(rawPhoneNumber);
+	const formattedPhoneNumber =
+		phoneNumber.getNumber("international") ?? phoneNumber.getNumber("national") ?? rawPhoneNumber;
+
+	return {
+		formattedPhoneNumber,
+		country: countries[phoneNumber.getRegionCode()] ?? "unknown",
+	};
+}
diff --git a/app/routes/__app/calls.tsx b/app/routes/__app/calls.tsx
index 477349a..6970abb 100644
--- a/app/routes/__app/calls.tsx
+++ b/app/routes/__app/calls.tsx
@@ -1,326 +1,21 @@
-import { Suspense } from "react";
-import { type PhoneCall, Prisma } from "@prisma/client";
-import { type LoaderFunction } from "@remix-run/node";
-import { json, useLoaderData } from "superjson-remix";
-import { parsePhoneNumber } from "awesome-phonenumber";
+import type { MetaFunction } from "@remix-run/node";
+import { useLoaderData } from "superjson-remix";
 
 import MissingTwilioCredentials from "~/features/core/components/missing-twilio-credentials";
 import PageTitle from "~/features/core/components/page-title";
-import Spinner from "~/features/core/components/spinner";
 import InactiveSubscription from "~/features/core/components/inactive-subscription";
 import PhoneCallsList from "~/features/phone-calls/components/phone-calls-list";
-import { requireLoggedIn } from "~/utils/auth.server";
-import db from "~/utils/db.server";
+import callsLoader, { type PhoneCallsLoaderData } from "~/features/phone-calls/loaders/calls";
+import { getSeoMeta } from "~/utils/seo";
 
-type PhoneCallMeta = {
-	formattedPhoneNumber: string;
-	country: string | "unknown";
-};
+export const meta: MetaFunction = () => ({
+	...getSeoMeta({ title: "Calls" }),
+});
 
-export type PhoneCallsLoaderData = {
-	user: {
-		hasOngoingSubscription: boolean;
-		hasPhoneNumber: boolean;
-	};
-	phoneCalls: (PhoneCall & { toMeta: PhoneCallMeta; fromMeta: PhoneCallMeta })[] | undefined;
-};
-
-export const loader: LoaderFunction = async ({ request }) => {
-	const sessionData = await requireLoggedIn(request);
-	if (!sessionData.phoneNumber) {
-		throw new Error("unreachable");
-	}
-
-	const phoneNumber = await db.phoneNumber.findUnique({
-		where: { id: sessionData.phoneNumber.id },
-	});
-	if (!phoneNumber || phoneNumber.isFetchingCalls) {
-		return json<PhoneCallsLoaderData>({
-			user: {
-				hasOngoingSubscription: true, // TODO
-				hasPhoneNumber: Boolean(phoneNumber),
-			},
-			phoneCalls: undefined,
-		});
-	}
-
-	const phoneCalls = await db.phoneCall.findMany({
-		where: { phoneNumberId: phoneNumber.id },
-		orderBy: { createdAt: Prisma.SortOrder.desc },
-	});
-
-	return json<PhoneCallsLoaderData>({
-		user: {
-			hasOngoingSubscription: true, // TODO
-			hasPhoneNumber: Boolean(phoneNumber),
-		},
-		phoneCalls: phoneCalls.map((phoneCall) => ({
-			...phoneCall,
-			fromMeta: getPhoneNumberMeta(phoneCall.from),
-			toMeta: getPhoneNumberMeta(phoneCall.to),
-		})),
-	});
-
-	function getPhoneNumberMeta(rawPhoneNumber: string) {
-		const countries: Record<string, string> = {
-			AF: "Afghanistan",
-			AL: "Albania",
-			DZ: "Algeria",
-			AS: "American Samoa",
-			AD: "Andorra",
-			AO: "Angola",
-			AI: "Anguilla",
-			AQ: "Antarctica",
-			AG: "Antigua and Barbuda",
-			AR: "Argentina",
-			AM: "Armenia",
-			AW: "Aruba",
-			AU: "Australia",
-			AT: "Austria",
-			AZ: "Azerbaijan",
-			BS: "Bahamas",
-			BH: "Bahrain",
-			BD: "Bangladesh",
-			BB: "Barbados",
-			BY: "Belarus",
-			BE: "Belgium",
-			BZ: "Belize",
-			BJ: "Benin",
-			BM: "Bermuda",
-			BT: "Bhutan",
-			BO: "Bolivia",
-			BA: "Bosnia and Herzegovina",
-			BW: "Botswana",
-			BV: "Bouvet Island",
-			BR: "Brazil",
-			IO: "British Indian Ocean Territory",
-			BN: "Brunei",
-			BG: "Bulgaria",
-			BF: "Burkina Faso",
-			BI: "Burundi",
-			KH: "Cambodia",
-			CM: "Cameroon",
-			CA: "Canada",
-			CV: "Cape Verde",
-			KY: "Cayman Islands",
-			CF: "Central African Republic",
-			TD: "Chad",
-			CL: "Chile",
-			CN: "China",
-			CX: "Christmas Island",
-			CC: "Cocos (Keeling) Islands",
-			CO: "Colombia",
-			KM: "Comoros",
-			CG: "Congo",
-			CD: "Congo, the Democratic Republic of the",
-			CK: "Cook Islands",
-			CR: "Costa Rica",
-			CI: "Ivory Coast",
-			HR: "Croatia",
-			CU: "Cuba",
-			CY: "Cyprus",
-			CZ: "Czech Republic",
-			DK: "Denmark",
-			DJ: "Djibouti",
-			DM: "Dominica",
-			DO: "Dominican Republic",
-			EC: "Ecuador",
-			EG: "Egypt",
-			SV: "El Salvador",
-			GQ: "Equatorial Guinea",
-			ER: "Eritrea",
-			EE: "Estonia",
-			ET: "Ethiopia",
-			FK: "Falkland Islands (Malvinas)",
-			FO: "Faroe Islands",
-			FJ: "Fiji",
-			FI: "Finland",
-			FR: "France",
-			GF: "French Guiana",
-			PF: "French Polynesia",
-			TF: "French Southern Territories",
-			GA: "Gabon",
-			GM: "Gambia",
-			GE: "Georgia",
-			DE: "Germany",
-			GH: "Ghana",
-			GI: "Gibraltar",
-			GR: "Greece",
-			GL: "Greenland",
-			GD: "Grenada",
-			GP: "Guadeloupe",
-			GU: "Guam",
-			GT: "Guatemala",
-			GG: "Guernsey",
-			GN: "Guinea",
-			GW: "Guinea-Bissau",
-			GY: "Guyana",
-			HT: "Haiti",
-			HM: "Heard Island and McDonald Islands",
-			VA: "Holy See (Vatican City State)",
-			HN: "Honduras",
-			HK: "Hong Kong",
-			HU: "Hungary",
-			IS: "Iceland",
-			IN: "India",
-			ID: "Indonesia",
-			IR: "Iran, Islamic Republic of",
-			IQ: "Iraq",
-			IE: "Ireland",
-			IM: "Isle of Man",
-			IL: "Israel",
-			IT: "Italy",
-			JM: "Jamaica",
-			JP: "Japan",
-			JE: "Jersey",
-			JO: "Jordan",
-			KZ: "Kazakhstan",
-			KE: "Kenya",
-			KI: "Kiribati",
-			KP: "Korea, Democratic People's Republic of",
-			KR: "South Korea",
-			KW: "Kuwait",
-			KG: "Kyrgyzstan",
-			LA: "Lao People's Democratic Republic",
-			LV: "Latvia",
-			LB: "Lebanon",
-			LS: "Lesotho",
-			LR: "Liberia",
-			LY: "Libya",
-			LI: "Liechtenstein",
-			LT: "Lithuania",
-			LU: "Luxembourg",
-			MO: "Macao",
-			MK: "Macedonia, the former Yugoslav Republic of",
-			MG: "Madagascar",
-			MW: "Malawi",
-			MY: "Malaysia",
-			MV: "Maldives",
-			ML: "Mali",
-			MT: "Malta",
-			MH: "Marshall Islands",
-			MQ: "Martinique",
-			MR: "Mauritania",
-			MU: "Mauritius",
-			YT: "Mayotte",
-			MX: "Mexico",
-			FM: "Micronesia, Federated States of",
-			MD: "Moldova, Republic of",
-			MC: "Monaco",
-			MN: "Mongolia",
-			ME: "Montenegro",
-			MS: "Montserrat",
-			MA: "Morocco",
-			MZ: "Mozambique",
-			MM: "Burma",
-			NA: "Namibia",
-			NR: "Nauru",
-			NP: "Nepal",
-			NL: "Netherlands",
-			AN: "Netherlands Antilles",
-			NC: "New Caledonia",
-			NZ: "New Zealand",
-			NI: "Nicaragua",
-			NE: "Niger",
-			NG: "Nigeria",
-			NU: "Niue",
-			NF: "Norfolk Island",
-			MP: "Northern Mariana Islands",
-			NO: "Norway",
-			OM: "Oman",
-			PK: "Pakistan",
-			PW: "Palau",
-			PS: "Palestinian Territory, Occupied",
-			PA: "Panama",
-			PG: "Papua New Guinea",
-			PY: "Paraguay",
-			PE: "Peru",
-			PH: "Philippines",
-			PN: "Pitcairn",
-			PL: "Poland",
-			PT: "Portugal",
-			PR: "Puerto Rico",
-			QA: "Qatar",
-			RE: "Réunion",
-			RO: "Romania",
-			RU: "Russia",
-			RW: "Rwanda",
-			SH: "Saint Helena, Ascension and Tristan da Cunha",
-			KN: "Saint Kitts and Nevis",
-			LC: "Saint Lucia",
-			PM: "Saint Pierre and Miquelon",
-			VC: "St. Vincent and the Grenadines",
-			WS: "Samoa",
-			SM: "San Marino",
-			ST: "Sao Tome and Principe",
-			SA: "Saudi Arabia",
-			SN: "Senegal",
-			RS: "Serbia",
-			SC: "Seychelles",
-			SL: "Sierra Leone",
-			SG: "Singapore",
-			SK: "Slovakia",
-			SI: "Slovenia",
-			SB: "Solomon Islands",
-			SO: "Somalia",
-			ZA: "South Africa",
-			GS: "South Georgia and the South Sandwich Islands",
-			SS: "South Sudan",
-			ES: "Spain",
-			LK: "Sri Lanka",
-			SD: "Sudan",
-			SR: "Suriname",
-			SJ: "Svalbard and Jan Mayen",
-			SZ: "Swaziland",
-			SE: "Sweden",
-			CH: "Switzerland",
-			SY: "Syrian Arab Republic",
-			TW: "Taiwan",
-			TJ: "Tajikistan",
-			TZ: "Tanzania, United Republic of",
-			TH: "Thailand",
-			TL: "Timor-Leste",
-			TG: "Togo",
-			TK: "Tokelau",
-			TO: "Tonga",
-			TT: "Trinidad and Tobago",
-			TN: "Tunisia",
-			TR: "Turkey",
-			TM: "Turkmenistan",
-			TC: "Turks and Caicos Islands",
-			TV: "Tuvalu",
-			UG: "Uganda",
-			UA: "Ukraine",
-			AE: "United Arab Emirates",
-			GB: "United Kingdom",
-			US: "United States",
-			UM: "United States Minor Outlying Islands",
-			UY: "Uruguay",
-			UZ: "Uzbekistan",
-			VU: "Vanuatu",
-			VE: "Venezuela",
-			VN: "Vietnam",
-			VG: "Virgin Islands, British",
-			VI: "Virgin Islands, U.S.",
-			WF: "Wallis and Futuna",
-			EH: "Western Sahara",
-			YE: "Yemen",
-			ZM: "Zambia",
-			ZW: "Zimbabwe",
-		};
-		const phoneNumber = parsePhoneNumber(rawPhoneNumber);
-		const formattedPhoneNumber =
-			phoneNumber.getNumber("international") ?? phoneNumber.getNumber("national") ?? rawPhoneNumber;
-
-		return {
-			formattedPhoneNumber,
-			country: countries[phoneNumber.getRegionCode()] ?? "unknown",
-		};
-	}
-};
+export const loader = callsLoader;
 
 export default function PhoneCalls() {
-	const { hasPhoneNumber, hasOngoingSubscription } = useLoaderData<PhoneCallsLoaderData>().user;
+	const { hasPhoneNumber, hasOngoingSubscription } = useLoaderData<PhoneCallsLoaderData>();
 
 	if (!hasPhoneNumber) {
 		return (
@@ -338,9 +33,7 @@ export default function PhoneCalls() {
 				<div className="filter blur-sm select-none absolute top-0 w-full h-full z-0">
 					<PageTitle title="Calls" />
 					<section className="relative flex flex-grow flex-col">
-						<Suspense fallback={<Spinner />}>
-							<PhoneCallsList />
-						</Suspense>
+						<PhoneCallsList />
 					</section>
 				</div>
 			</>
@@ -351,10 +44,7 @@ export default function PhoneCalls() {
 		<>
 			<PageTitle className="pl-12" title="Calls" />
 			<section className="flex flex-grow flex-col">
-				{/*<Suspense fallback={<Spinner />}>*/}
-				{/* TODO: skeleton phone calls list */}
 				<PhoneCallsList />
-				{/*</Suspense>*/}
 			</section>
 		</>
 	);