feat: add loading page

Author: alcercu

messages/ar.json

@@ -4,6 +4,9 @@
     "subtitle": "أدخل رقم القضية لعرض تفاصيلها.",
     "button": "بحث"
   },
+  "loading": {
+    "title": "تحميل"
+  },
   "error": {
     "title": "حدث خطأ ما!",
     "subtitle": "القضية التي تبحث عنها غير موجودة بعد.",

messages/en.json

@@ -4,6 +4,9 @@
     "subtitle": "Enter the case number to view its details.",
     "button": "Search"
   },
+  "loading": {
+    "title": "LOADING"
+  },
   "error": {
     "title": "Something went wrong!",
     "subtitle": "The case you are looking for doesn't exist yet.",

messages/es.json

@@ -4,6 +4,9 @@
     "subtitle": "Introduzca el número del caso para ver los detalles.",
     "button": "Buscar"
   },
+  "loading": {
+    "title": "CARGANDO"
+  },
   "error": {
     "title": "Algo salió mal",
     "subtitle": "El caso que estás buscando no existe aún.",

src/app/[locale]/loading.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import React from "react";
+
+import clsx from "clsx";
+import { useTranslations } from "next-intl";
+
+const Loading: React.FC = () => {
+  const t = useTranslations("loading");
+
+  return (
+    <div className="m-auto">
+      <div
+        className={clsx(
+          "w-16 h-16 border-4 border-r-white-background border-primary-blue",
+          "rounded-full animate-spin mx-auto",
+        )}
+      />
+      <span
+        className={
+          "mt-2 font-semibold text-primary-blue text-center animate-pulse block"
+        }
+      >
+        {t("title")}
+      </span>
+    </div>
+  );
+};
+
+export default Loading;