style: loading screens (#750)

* fix: dashboard workspace activity mutation

* style: loading screens

apps/app/layouts/auth-layout/project-authorization-wrapper.tsx

@@ -10,12 +10,11 @@ import Container from "layouts/container";
 import AppHeader from "layouts/app-layout/app-header";
 import AppSidebar from "layouts/app-layout/app-sidebar";
 import SettingsNavbar from "layouts/settings-navbar";
-import { WorkspaceAuthorizationLayout } from "./workspace-authorization-wrapper";
 // components
 import { NotAuthorizedView, JoinProject } from "components/auth-screens";
 import { CommandPalette } from "components/command-palette";
 // ui
-import { PrimaryButton } from "components/ui";
+import { PrimaryButton, Spinner } from "components/ui";
 // icons
 import { LayerDiagonalIcon } from "components/icons";
 
@@ -63,14 +62,16 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
   const settingsLayout = router.pathname.includes("/settings");
 
   return (
-    <WorkspaceAuthorizationLayout>
     <Container meta={meta}>
       <CommandPalette />
       <div className="flex h-screen w-full overflow-x-hidden">
         <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
         {loading ? (
-            <div className="container h-screen flex justify-center items-center p-4 text-2xl font-semibold">
-              <p>Loading...</p>
+          <div className="h-full w-full grid place-items-center p-4">
+            <div className="flex flex-col items-center gap-3 text-center">
+              <h3 className="text-xl">Setting up your project...</h3>
+              <Spinner />
+            </div>
           </div>
         ) : error?.status === 401 || error?.status === 403 ? (
           <JoinProject />
@@ -115,11 +116,7 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
               className={`flex w-full flex-grow flex-col ${
                 noPadding ? "" : settingsLayout ? "p-8 lg:px-28" : "p-8"
               } ${
-                  bg === "primary"
-                    ? "bg-primary"
-                    : bg === "secondary"
-                    ? "bg-secondary"
-                    : "bg-primary"
+                bg === "primary" ? "bg-primary" : bg === "secondary" ? "bg-secondary" : "bg-primary"
               }`}
             >
               {settingsLayout && (
@@ -139,6 +136,5 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
         )}
       </div>
     </Container>
-    </WorkspaceAuthorizationLayout>
   );
 };

apps/app/layouts/auth-layout/user-authorization-wrapper.tsx

@@ -1,8 +1,13 @@
+import { useRouter } from "next/router";
+
 import useSWR from "swr";
 
-import { CURRENT_USER } from "constants/fetch-keys";
+// services
 import userService from "services/user.service";
-import { useRouter } from "next/router";
+// ui
+import { Spinner } from "components/ui";
+// fetch-keys
+import { CURRENT_USER } from "constants/fetch-keys";
 
 type Props = {
   children: React.ReactNode;
@@ -14,7 +19,14 @@ export const UserAuthorizationLayout: React.FC<Props> = ({ children }) => {
   const { data: currentUser, error } = useSWR(CURRENT_USER, () => userService.currentUser());
 
   if (!currentUser && !error) {
-    return <div className="grid place-items-center h-screen">Loading...</div>;
+    return (
+      <div className="h-screen grid place-items-center p-4">
+        <div className="flex flex-col items-center gap-3 text-center">
+          <h3 className="text-xl">Loading your profile...</h3>
+          <Spinner />
+        </div>
+      </div>
+    );
   }
 
   if (error?.status === 401) {

apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx

@@ -12,15 +12,15 @@ import Container from "layouts/container";
 import AppSidebar from "layouts/app-layout/app-sidebar";
 import AppHeader from "layouts/app-layout/app-header";
 import SettingsNavbar from "layouts/settings-navbar";
+import { UserAuthorizationLayout } from "./user-authorization-wrapper";
 // components
 import { NotAuthorizedView, NotAWorkspaceMember } from "components/auth-screens";
 import { CommandPalette } from "components/command-palette";
 // icons
-import { PrimaryButton } from "components/ui";
+import { PrimaryButton, Spinner } from "components/ui";
 import { LayerDiagonalIcon } from "components/icons";
 // fetch-keys
 import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
-import { UserAuthorizationLayout } from "./user-authorization-wrapper";
 
 type Meta = {
   title?: string | null;
@@ -69,10 +69,12 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
   );
 
   if (!workspaceMemberMe && !error)
-    // TODO: show good loading UI
     return (
-      <div className="container h-screen flex justify-center items-center p-4 text-2xl font-semibold">
-        <p>Loading...</p>
+      <div className="h-screen grid place-items-center p-4">
+        <div className="flex flex-col items-center gap-3 text-center">
+          <h3 className="text-xl">Setting up your workspace...</h3>
+          <Spinner />
+        </div>
       </div>
     );
 

apps/app/pages/signin.tsx

@@ -99,7 +99,7 @@ const SignInPage: NextPage = () => {
     >
       {isLoading && (
         <div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-white">
-          <h2 className="text-2xl text-gray-900">Signing in. Please wait...</h2>
+          <h2 className="text-xl text-gray-900">Signing in. Please wait...</h2>
           <Spinner />
         </div>
       )}