Added loading layout for HS

src/app/auth/_page.tsx

@@ -8,6 +8,10 @@ import { useGlobalStore } from "@/core/global-store";
 import { useHsLoginRefresh, useRecordUserActivity } from "@/api/mutations";
 import { useCallback } from "react";
 import * as Sentry from "@sentry/nextjs";
+import Image from "next/image";
+import i18next from "i18next";
+import { UilSpinner } from "@tooni/iconscout-unicons-react";
+import { Alert } from "@ui/alert";
 
 export function AuthPage() {
   const searchParams = useSearchParams();
@@ -66,5 +70,16 @@ export function AuthPage() {
     initUser();
   });
 
-  return <></>;
+  return (
+    <div className="flex gap-4 md:gap-8 lg:gap-12 items-center justify-start flex-col p-4 sm:p-6 md:p-8 lg:p-12 xl:p-16 w-full dark:bg-black">
+      <Image src="/assets/logo-circle.svg" alt="logo" width={128} height={128} />
+      <h1 className="text-xl md:text-3xl lg:text-4xl xl:text-6xl font-semibold text-blue-dark-sky">
+        {i18next.t("hs-login.title")}
+      </h1>
+      <Alert>
+        <p className="md:text-lg lg:text-xl p-2">{i18next.t("hs-login.message")}</p>
+      </Alert>
+      <UilSpinner className="animate-spin w-6 h-6 lg:w-8 lg:h-8" />
+    </div>
+  );
 }

src/features/i18n/locales/en-US.json

@@ -2461,5 +2461,9 @@
     "invalid-time": "Invalid time format. Use HH:MM",
     "max-choices-voted": "Max choices voted by user",
     "max-votes-hint": "You may select {{n}} choices"
+  },
+  "hs-login": {
+    "title": "Logging in to Ecency from HiveSigner",
+    "message": "Please wait a bit, You will be redirected automatically."
   }
 }