Settings Improvements - tRPC, Skeletons & Screen Width Issues (#4484)

* Add skeleton and trpc to profile page

* Refactor general page

* Calendars add skeleton loader

* Add translations to calendar empty screen

* Improve conferencing pages

* Add skeleton loader and TRPC to appearance page

* Fixes children being cut off at screen types

* PR feedback fixes

Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/pages/v2/settings/my-account/appearance.tsx

@@ -1,8 +1,6 @@
-import { GetServerSidePropsContext } from "next";
 import { Controller, useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import prisma from "@calcom/prisma";
 import { trpc } from "@calcom/trpc/react";
 import Badge from "@calcom/ui/v2/core/Badge";
 import { Button } from "@calcom/ui/v2/core/Button";
@@ -12,14 +10,34 @@ import ColorPicker from "@calcom/ui/v2/core/colorpicker";
 import { Form } from "@calcom/ui/v2/core/form/fields";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
+import { SkeletonContainer, SkeletonText, SkeletonButton } from "@calcom/ui/v2/core/skeleton";
 
-import { getSession } from "@lib/auth";
-import { inferSSRProps } from "@lib/types/inferSSRProps";
+const SkeletonLoader = () => {
+  return (
+    <SkeletonContainer>
+      <div className="mt-6 mb-8 space-y-6 divide-y">
+        <div className="flex items-center">
+          <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
+          <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
+          <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
+        </div>
+        <div className="flex justify-between">
+          <SkeletonText className="h-8 w-1/3" />
+          <SkeletonText className="h-8 w-1/3" />
+        </div>
 
-const AppearanceView = (props: inferSSRProps<typeof getServerSideProps>) => {
+        <SkeletonText className="h-8 w-full" />
+
+        <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
+      </div>
+    </SkeletonContainer>
+  );
+};
+
+const AppearanceView = () => {
   const { t } = useLocale();
-  const { user } = props;
 
+  const { data: user, isLoading } = trpc.useQuery(["viewer.me"]);
   const mutation = trpc.useMutation("viewer.updateProfile", {
     onSuccess: () => {
       showToast(t("settings_updated_successfully"), "success");
@@ -31,169 +49,132 @@ const AppearanceView = (props: inferSSRProps<typeof getServerSideProps>) => {
 
   const formMethods = useForm();
 
-  return (
-    <Form
-      form={formMethods}
-      handleSubmit={(values) => {
-        mutation.mutate({
-          ...values,
-          // Radio values don't support null as values, therefore we convert an empty string
-          // back to null here.
-          theme: values.theme || null,
-        });
-      }}>
-      <Meta title="Appearance" description="Manage settings for your booking appearance" />
-      <div className="mb-6 flex items-center text-sm">
-        <div>
-          <p className="font-semibold">{t("theme")}</p>
-          <p className="text-gray-600">{t("theme_applies_note")}</p>
-        </div>
-      </div>
-      <div className="flex flex-col justify-between sm:flex-row">
-        <ThemeLabel
-          variant="system"
-          value={null}
-          label={t("theme_system")}
-          defaultChecked={user.theme === null}
-          register={formMethods.register}
-        />
-        <ThemeLabel
-          variant="light"
-          value="light"
-          label={t("theme_light")}
-          defaultChecked={user.theme === "light"}
-          register={formMethods.register}
-        />
-        <ThemeLabel
-          variant="dark"
-          value="dark"
-          label={t("theme_dark")}
-          defaultChecked={user.theme === "dark"}
-          register={formMethods.register}
-        />
-      </div>
+  if (isLoading) return <SkeletonLoader />;
 
-      <hr className="border-1 my-8 border-neutral-200" />
-      <div className="mb-6 flex items-center text-sm">
-        <div>
-          <p className="font-semibold">{t("custom_brand_colors")}</p>
-          <p className="mt-0.5 leading-5 text-gray-600">{t("customize_your_brand_colors")}</p>
+  if (user)
+    return (
+      <Form
+        form={formMethods}
+        handleSubmit={(values) => {
+          mutation.mutate({
+            ...values,
+            // Radio values don't support null as values, therefore we convert an empty string
+            // back to null here.
+            theme: values.theme || null,
+          });
+        }}>
+        <Meta title="Appearance" description="Manage settings for your booking appearance" />
+        <div className="mb-6 flex items-center text-sm">
+          <div>
+            <p className="font-semibold">{t("theme")}</p>
+            <p className="text-gray-600">{t("theme_applies_note")}</p>
+          </div>
+        </div>
+        <div className="flex flex-col justify-between sm:flex-row">
+          <ThemeLabel
+            variant="system"
+            value={null}
+            label={t("theme_system")}
+            defaultChecked={user.theme === null}
+            register={formMethods.register}
+          />
+          <ThemeLabel
+            variant="light"
+            value="light"
+            label={t("theme_light")}
+            defaultChecked={user.theme === "light"}
+            register={formMethods.register}
+          />
+          <ThemeLabel
+            variant="dark"
+            value="dark"
+            label={t("theme_dark")}
+            defaultChecked={user.theme === "dark"}
+            register={formMethods.register}
+          />
         </div>
-      </div>
 
-      <div className="block justify-between sm:flex">
-        <Controller
-          name="brandColor"
-          control={formMethods.control}
-          defaultValue={user.brandColor}
-          render={({ field: { value } }) => (
-            <div>
-              <p className="mb-2 block text-sm font-medium text-gray-900">{t("light_brand_color")}</p>
-              <ColorPicker
-                defaultValue={user.brandColor}
-                onChange={(value) => formMethods.setValue("brandColor", value)}
-              />
-            </div>
-          )}
-        />
-        <Controller
-          name="darkBrandColor"
-          control={formMethods.control}
-          defaultValue={user.darkBrandColor}
-          render={({ field: { value } }) => (
-            <div className="mt-6 sm:mt-0">
-              <p className="mb-2 block text-sm font-medium text-gray-900">{t("dark_brand_color")}</p>
-              <ColorPicker
-                defaultValue={user.darkBrandColor}
-                onChange={(value) => formMethods.setValue("darkBrandColor", value)}
-              />
-            </div>
-          )}
-        />
-      </div>
-      {/* TODO future PR to preview brandColors */}
-      {/* <Button
+        <hr className="border-1 my-8 border-neutral-200" />
+        <div className="mb-6 flex items-center text-sm">
+          <div>
+            <p className="font-semibold">{t("custom_brand_colors")}</p>
+            <p className="mt-0.5 leading-5 text-gray-600">{t("customize_your_brand_colors")}</p>
+          </div>
+        </div>
+
+        <div className="block justify-between sm:flex">
+          <Controller
+            name="brandColor"
+            control={formMethods.control}
+            defaultValue={user.brandColor}
+            render={() => (
+              <div>
+                <p className="mb-2 block text-sm font-medium text-gray-900">{t("light_brand_color")}</p>
+                <ColorPicker
+                  defaultValue={user.brandColor}
+                  onChange={(value) => formMethods.setValue("brandColor", value)}
+                />
+              </div>
+            )}
+          />
+          <Controller
+            name="darkBrandColor"
+            control={formMethods.control}
+            defaultValue={user.darkBrandColor}
+            render={() => (
+              <div className="mt-6 sm:mt-0">
+                <p className="mb-2 block text-sm font-medium text-gray-900">{t("dark_brand_color")}</p>
+                <ColorPicker
+                  defaultValue={user.darkBrandColor}
+                  onChange={(value) => formMethods.setValue("darkBrandColor", value)}
+                />
+              </div>
+            )}
+          />
+        </div>
+        {/* TODO future PR to preview brandColors */}
+        {/* <Button
         color="secondary"
         EndIcon={Icon.FiExternalLink}
         className="mt-6"
         onClick={() => window.open(`${WEBAPP_URL}/${user.username}/${user.eventTypes[0].title}`, "_blank")}>
         Preview
       </Button> */}
-      <hr className="border-1 my-8 border-neutral-200" />
-      <Controller
-        name="hideBranding"
-        control={formMethods.control}
-        defaultValue={user.hideBranding}
-        render={({ field: { value } }) => (
-          <>
-            <div className="flex w-full text-sm">
-              <div className="mr-1 flex-grow">
-                <div className="flex items-center">
-                  <p className="mr-2 font-semibold">{t("disable_cal_branding")}</p>{" "}
-                  <Badge variant="gray">{t("pro")}</Badge>
+        <hr className="border-1 my-8 border-neutral-200" />
+        <Controller
+          name="hideBranding"
+          control={formMethods.control}
+          defaultValue={user.hideBranding}
+          render={({ field: { value } }) => (
+            <>
+              <div className="flex w-full text-sm">
+                <div className="mr-1 flex-grow">
+                  <div className="flex items-center">
+                    <p className="mr-2 font-semibold">{t("disable_cal_branding")}</p>{" "}
+                    <Badge variant="gray">{t("pro")}</Badge>
+                  </div>
+                  <p className="mt-0.5  text-gray-600">{t("removes_cal_branding")}</p>
+                </div>
+                <div className="flex-none">
+                  <Switch
+                    onCheckedChange={(checked) => formMethods.setValue("hideBranding", checked)}
+                    checked={value}
+                  />
                 </div>
-                <p className="mt-0.5  text-gray-600">{t("removes_cal_branding")}</p>
               </div>
-              <div className="flex-none">
-                <Switch
-                  onCheckedChange={(checked) => formMethods.setValue("hideBranding", checked)}
-                  checked={value}
-                />
-              </div>
-            </div>
-          </>
-        )}
-      />
-      <Button color="primary" className="mt-8">
-        {t("update")}
-      </Button>
-    </Form>
-  );
+            </>
+          )}
+        />
+        <Button color="primary" className="mt-8">
+          {t("update")}
+        </Button>
+      </Form>
+    );
 };
 
 AppearanceView.getLayout = getLayout;
 
 export default AppearanceView;
-
-export const getServerSideProps = async (context: GetServerSidePropsContext) => {
-  const session = await getSession(context);
-
-  if (!session?.user?.id) {
-    return { redirect: { permanent: false, destination: "/auth/login" } };
-  }
-
-  const user = await prisma.user.findUnique({
-    where: {
-      id: session.user.id,
-    },
-    select: {
-      username: true,
-      timeZone: true,
-      timeFormat: true,
-      weekStart: true,
-      brandColor: true,
-      darkBrandColor: true,
-      hideBranding: true,
-      theme: true,
-      eventTypes: {
-        select: {
-          title: true,
-        },
-      },
-    },
-  });
-
-  if (!user) {
-    throw new Error("User seems logged in but cannot be found in the db");
-  }
-
-  return {
-    props: {
-      user,
-    },
-  };
-};
-
 interface ThemeLabelProps {
   variant: "light" | "dark" | "system";
   value?: "light" | "dark" | null;

apps/web/pages/v2/settings/my-account/calendars.tsx

@@ -11,6 +11,7 @@ import Badge from "@calcom/ui/v2/core/Badge";
 import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen";
 import Meta from "@calcom/ui/v2/core/Meta";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
+import { SkeletonContainer, SkeletonText, SkeletonButton } from "@calcom/ui/v2/core/skeleton";
 import { List, ListItem, ListItemText, ListItemTitle } from "@calcom/ui/v2/modules/List";
 import DestinationCalendarSelector from "@calcom/ui/v2/modules/event-types/DestinationCalendarSelector";
 import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
@@ -19,6 +20,21 @@ import { QueryCell } from "@lib/QueryCell";
 
 import { CalendarSwitch } from "@components/v2/settings/CalendarSwitch";
 
+const SkeletonLoader = () => {
+  return (
+    <SkeletonContainer>
+      <div className="mt-6 mb-8 space-y-6 divide-y">
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+
+        <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
+      </div>
+    </SkeletonContainer>
+  );
+};
+
 const CalendarsView = () => {
   const { t } = useLocale();
   const router = useRouter();
@@ -37,6 +53,7 @@ const CalendarsView = () => {
       <Meta title="Calendars" description="Configure how your event types interact with your calendars" />
       <QueryCell
         query={query}
+        customLoader={<SkeletonLoader />}
         success={({ data }) => {
           return data.connectedCalendars.length ? (
             <div>
@@ -65,7 +82,6 @@ const CalendarsView = () => {
                   />
                 </div>
               </div>
-
               <h4 className="mt-12 text-base font-semibold leading-5 text-black">
                 {t("check_for_conflicts")}
               </h4>
@@ -130,9 +146,9 @@ const CalendarsView = () => {
           ) : (
             <EmptyScreen
               Icon={Icon.FiCalendar}
-              headline="No calendar installed"
-              description="You have not yet connected any of your calendars"
-              buttonText="Add a calendar"
+              headline={t("no_calendar_installed")}
+              description={t("no_calendar_installed_description")}
+              buttonText={t("add_a_calendar")}
               buttonOnClick={() => router.push(`${WEBAPP_URL}/apps/categories/calendar`)}
             />
           );

apps/web/pages/v2/settings/my-account/conferencing.tsx

@@ -1,92 +1,110 @@
-import { GetServerSidePropsContext } from "next";
+import { useState } from "react";
 
-import getApps from "@calcom/app-store/utils";
-import { getSession } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import prisma from "@calcom/prisma";
+import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
 import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Button } from "@calcom/ui/v2";
+import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
 import Meta from "@calcom/ui/v2/core/Meta";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
+import showToast from "@calcom/ui/v2/core/notifications";
+import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2/core/skeleton";
 import { List, ListItem, ListItemText, ListItemTitle } from "@calcom/ui/v2/modules/List";
-import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
 
-import { inferSSRProps } from "@lib/types/inferSSRProps";
+const SkeletonLoader = () => {
+  return (
+    <SkeletonContainer>
+      <div className="mt-6 mb-8 space-y-6 divide-y">
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+      </div>
+    </SkeletonContainer>
+  );
+};
 
-const ConferencingLayout = (props: inferSSRProps<typeof getServerSideProps>) => {
+const ConferencingLayout = () => {
   const { t } = useLocale();
+  const utils = trpc.useContext();
 
-  const { apps } = props;
+  const { data: apps, isLoading } = trpc.useQuery(
+    ["viewer.integrations", { variant: "conferencing", onlyInstalled: true }],
+    {
+      suspense: true,
+    }
+  );
+  const deleteAppMutation = trpc.useMutation("viewer.deleteCredential", {
+    onSuccess: () => {
+      showToast("Integration deleted successfully", "success");
+      utils.invalidateQueries(["viewer.integrations", { variant: "conferencing", onlyInstalled: true }]);
+      setDeleteAppModal(false);
+    },
+    onError: () => {
+      showToast("Error deleting app", "error");
+      setDeleteAppModal(false);
+    },
+  });
 
-  // Error reason: getaddrinfo EAI_AGAIN http
-  // const query = trpc.useQuery(["viewer.integrations", { variant: "conferencing", onlyInstalled: true }], {
-  //   suspense: true,
-  // });
+  const [deleteAppModal, setDeleteAppModal] = useState(false);
+  const [deleteCredentialId, setDeleteCredentialId] = useState<number>(0);
+
+  if (isLoading) return <SkeletonLoader />;
 
   return (
     <div className="w-full bg-white sm:mx-0 xl:mt-0">
       <Meta title="conferencing" description="conferencing_description" />
       <List roundContainer={true}>
-        {apps.map((app) => (
-          <ListItem rounded={false} className="flex-col border-0" key={app.title}>
-            <div className="flex w-full flex-1 items-center space-x-3 pl-1 pt-1 rtl:space-x-reverse">
-              {
-                // eslint-disable-next-line @next/next/no-img-element
-                app.logo && <img className="h-10 w-10" src={app.logo} alt={app.title} />
-              }
-              <div className="flex-grow truncate pl-2">
-                <ListItemTitle component="h3" className="mb-1 space-x-2">
-                  <h3 className="truncate text-sm font-medium text-neutral-900">{app.title}</h3>
-                </ListItemTitle>
-                <ListItemText component="p">{app.description}</ListItemText>
-              </div>
-              <div>
-                <Dropdown>
-                  <DropdownMenuTrigger asChild>
-                    <Button StartIcon={Icon.FiMoreHorizontal} size="icon" color="secondary" />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent>
-                    <DropdownMenuItem>
-                      <DisconnectIntegration
-                        credentialId={app.credentialId}
-                        label={t("remove_app")}
-                        trashIcon
-                        isGlobal={app.isGlobal}
-                      />
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </Dropdown>
-              </div>
-              {/* <div className="flex w-1/2 space-x-6">
-                <img className="h-10 w-10" src={app.logo} alt={app.title} />
-
-                <div className=" truncate pl-2">
-                  <h3 className="truncate text-sm font-medium text-neutral-900">{app.title}</h3>
-                  <p className="truncate text-sm text-gray-500">{app.description}</p>
+        {apps?.items &&
+          apps.items
+            .map((app) => ({ ...app, title: app.title || app.name }))
+            .map((app) => (
+              <ListItem rounded={false} className="flex-col border-0" key={app.title}>
+                <div className="flex w-full flex-1 items-center space-x-3 pl-1 pt-1 rtl:space-x-reverse">
+                  {
+                    // eslint-disable-next-line @next/next/no-img-element
+                    app.logo && <img className="h-10 w-10" src={app.logo} alt={app.title} />
+                  }
+                  <div className="flex-grow truncate pl-2">
+                    <ListItemTitle component="h3" className="mb-1 space-x-2">
+                      <h3 className="truncate text-sm font-medium text-neutral-900">{app.title}</h3>
+                    </ListItemTitle>
+                    <ListItemText component="p">{app.description}</ListItemText>
+                  </div>
+                  <div>
+                    <Dropdown>
+                      <DropdownMenuTrigger asChild>
+                        <Button StartIcon={Icon.FiMoreHorizontal} size="icon" color="secondary" />
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent>
+                        <DropdownMenuItem>
+                          <Button
+                            color="destructive"
+                            StartIcon={Icon.FiTrash}
+                            disabled={app.isGlobal}
+                            onClick={() => {
+                              setDeleteCredentialId(app.credentialIds[0]);
+                              setDeleteAppModal(true);
+                            }}>
+                            {t("remove_app")}
+                          </Button>
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </Dropdown>
+                  </div>
                 </div>
-              </div>
-
-              <div>
-                <Dropdown>
-                  <DropdownMenuTrigger className="focus:ring-brand-900 block h-[36px] w-auto justify-center  rounded-md border border-gray-200 bg-transparent text-gray-700 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1">
-                    <Icon.FiMoreHorizontal className="group-hover:text-gray-800" />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent>
-                    <DropdownMenuItem>
-                      <DisconnectIntegration
-                        credentialId={app.credentialId}
-                        label={t("remove_app")}
-                        trashIcon
-                        isGlobal={app.isGlobal}
-                      />
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </Dropdown>
-              </div> */}
-            </div>
-          </ListItem>
-        ))}
+              </ListItem>
+            ))}
       </List>
+
+      <Dialog open={deleteAppModal} onOpenChange={setDeleteAppModal}>
+        <DialogContent
+          title={t("Remove app")}
+          description={t("are_you_sure_you_want_to_remove_this_app")}
+          type="confirmation"
+          actionText={t("yes_remove_app")}
+          Icon={Icon.FiAlertCircle}
+          actionOnClick={() => deleteAppMutation.mutate({ id: deleteCredentialId })}
+        />
+      </Dialog>
     </div>
   );
 };
@@ -94,39 +112,3 @@ const ConferencingLayout = (props: inferSSRProps<typeof getServerSideProps>) =>
 ConferencingLayout.getLayout = getLayout;
 
 export default ConferencingLayout;
-
-export const getServerSideProps = async (context: GetServerSidePropsContext) => {
-  const session = await getSession(context);
-
-  if (!session?.user?.id) {
-    return { redirect: { permanent: false, destination: "/auth/login" } };
-  }
-
-  const videoCredentials = await prisma.credential.findMany({
-    where: {
-      userId: session.user.id,
-      app: {
-        categories: {
-          has: "video",
-        },
-      },
-    },
-  });
-
-  const apps = getApps(videoCredentials)
-    .filter((app) => {
-      return app.variant === "conferencing" && app.credentials.length;
-    })
-    .map((app) => {
-      return {
-        slug: app.slug,
-        title: app.title || app.name,
-        logo: app.logo,
-        description: app.description,
-        credentialId: app.credentials[0].id,
-        isGlobal: app.isGlobal || false,
-      };
-    });
-
-  return { props: { apps } };
-};

apps/web/pages/v2/settings/my-account/general.tsx

@@ -1,11 +1,8 @@
-import { GetServerSidePropsContext } from "next";
-import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
 import { useMemo } from "react";
 import { useForm, Controller } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import prisma from "@calcom/prisma";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/v2/core/Button";
 import Meta from "@calcom/ui/v2/core/Meta";
@@ -14,35 +11,47 @@ import Select from "@calcom/ui/v2/core/form/Select";
 import { Form, Label } from "@calcom/ui/v2/core/form/fields";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
+import { SkeletonContainer, SkeletonText, SkeletonButton } from "@calcom/ui/v2/core/skeleton";
 
 import { withQuery } from "@lib/QueryCell";
-import { getSession } from "@lib/auth";
 import { nameOfDay } from "@lib/core/i18n/weekday";
-import { inferSSRProps } from "@lib/types/inferSSRProps";
+
+const SkeletonLoader = () => {
+  return (
+    <SkeletonContainer>
+      <div className="mt-6 mb-8 space-y-6 divide-y">
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+
+        <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
+      </div>
+    </SkeletonContainer>
+  );
+};
 
 interface GeneralViewProps {
   localeProp: string;
-  t: TFunction;
-  user: {
-    timeZone: string;
-    timeFormat: number | null;
-    weekStart: string;
-  };
 }
 
 const WithQuery = withQuery(["viewer.public.i18n"], { context: { skipBatch: true } });
 
-const GeneralQueryView = (props: inferSSRProps<typeof getServerSideProps>) => {
-  const { t } = useLocale();
-
-  return <WithQuery success={({ data }) => <GeneralView localeProp={data.locale} t={t} {...props} />} />;
+const GeneralQueryView = () => {
+  return (
+    <WithQuery
+      success={({ data }) => <GeneralView localeProp={data.locale} />}
+      customLoader={<SkeletonLoader />}
+    />
+  );
 };
 
-const GeneralView = ({ localeProp, t, user }: GeneralViewProps) => {
+const GeneralView = ({ localeProp }: GeneralViewProps) => {
   const router = useRouter();
   const utils = trpc.useContext();
+  const { t } = useLocale();
 
-  // const { data: user, isLoading } = trpc.useQuery(["viewer.me"]);
+  const { data: user, isLoading } = trpc.useQuery(["viewer.me"]);
   const mutation = trpc.useMutation("viewer.updateProfile", {
     onSuccess: () => {
       showToast(t("settings_updated_successfully"), "success");
@@ -95,6 +104,8 @@ const GeneralView = ({ localeProp, t, user }: GeneralViewProps) => {
     },
   });
 
+  if (isLoading) return <SkeletonLoader />;
+
   return (
     <Form
       form={formMethods}
@@ -187,32 +198,3 @@ const GeneralView = ({ localeProp, t, user }: GeneralViewProps) => {
 GeneralQueryView.getLayout = getLayout;
 
 export default GeneralQueryView;
-
-export const getServerSideProps = async (context: GetServerSidePropsContext) => {
-  const session = await getSession(context);
-
-  if (!session?.user?.id) {
-    return { redirect: { permanent: false, destination: "/auth/login" } };
-  }
-
-  const user = await prisma.user.findUnique({
-    where: {
-      id: session.user.id,
-    },
-    select: {
-      timeZone: true,
-      timeFormat: true,
-      weekStart: true,
-    },
-  });
-
-  if (!user) {
-    throw new Error("User seems logged in but cannot be found in the db");
-  }
-
-  return {
-    props: {
-      user,
-    },
-  };
-};

apps/web/pages/v2/settings/my-account/profile.tsx

@@ -1,12 +1,10 @@
 import crypto from "crypto";
-import { GetServerSidePropsContext } from "next";
 import { signOut } from "next-auth/react";
 import { useRef, useState, BaseSyntheticEvent } from "react";
 import { Controller, useForm } from "react-hook-form";
 
-import { ErrorCode, getSession } from "@calcom/lib/auth";
+import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import prisma from "@calcom/prisma";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
@@ -20,21 +18,37 @@ import Meta from "@calcom/ui/v2/core/Meta";
 import { Form, Label, TextField, PasswordField } from "@calcom/ui/v2/core/form/fields";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
-
-import { inferSSRProps } from "@lib/types/inferSSRProps";
+import { SkeletonContainer, SkeletonText, SkeletonButton, SkeletonAvatar } from "@calcom/ui/v2/core/skeleton";
 
 import TwoFactor from "@components/auth/TwoFactor";
 
+const SkeletonLoader = () => {
+  return (
+    <SkeletonContainer>
+      <div className="mt-6 mb-8 space-y-6 divide-y">
+        <div className="flex items-center">
+          <SkeletonAvatar className=" h-12 w-12 px-4" />
+          <SkeletonButton className=" h-6 w-32 rounded-md p-5" />
+        </div>
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+
+        <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
+      </div>
+    </SkeletonContainer>
+  );
+};
+
 interface DeleteAccountValues {
   totpCode: string;
 }
 
-const ProfileView = (props: inferSSRProps<typeof getServerSideProps>) => {
+const ProfileView = () => {
   const { t } = useLocale();
   const utils = trpc.useContext();
 
-  const { user } = props;
-  // const { data: user, isLoading } = trpc.useQuery(["viewer.me"]);
+  const { data: user, isLoading } = trpc.useQuery(["viewer.me"]);
   const mutation = trpc.useMutation("viewer.updateProfile", {
     onSuccess: () => {
       showToast(t("settings_updated_successfully"), "success");
@@ -50,6 +64,11 @@ const ProfileView = (props: inferSSRProps<typeof getServerSideProps>) => {
 
   const form = useForm<DeleteAccountValues>();
 
+  const emailMd5 = crypto
+    .createHash("md5")
+    .update(user?.email || "example@example.com")
+    .digest("hex");
+
   const onDeleteMeSuccessMutation = async () => {
     await utils.invalidateQueries(["viewer.me"]);
     showToast(t("Your account was deleted"), "success");
@@ -88,7 +107,7 @@ const ProfileView = (props: inferSSRProps<typeof getServerSideProps>) => {
 
   const formMethods = useForm({
     defaultValues: {
-      avatar: user.avatar || "",
+      avatar: user?.avatar || "",
       username: user?.username || "",
       name: user?.name || "",
       bio: user?.bio || "",
@@ -107,6 +126,8 @@ const ProfileView = (props: inferSSRProps<typeof getServerSideProps>) => {
     [ErrorCode.ThirdPartyIdentityProviderEnabled]: t("account_created_with_identity_provider"),
   };
 
+  if (isLoading) return <SkeletonLoader />;
+
   return (
     <>
       <Form
@@ -116,13 +137,12 @@ const ProfileView = (props: inferSSRProps<typeof getServerSideProps>) => {
         }}>
         <Meta title="Profile" description="Manage settings for your cal profile" />
         <div className="flex items-center">
-          {/* TODO upload new avatar */}
           <Controller
             control={formMethods.control}
             name="avatar"
             render={({ field: { value } }) => (
               <>
-                <Avatar alt="" imageSrc={value} gravatarFallbackMd5={user.emailMd5} size="lg" />
+                <Avatar alt="" imageSrc={value} gravatarFallbackMd5={emailMd5} size="lg" />
                 <div className="ml-4">
                   <ImageUploader
                     target="avatar"
@@ -222,7 +242,7 @@ const ProfileView = (props: inferSSRProps<typeof getServerSideProps>) => {
                 ref={passwordRef}
               />
 
-              {user.twoFactorEnabled && (
+              {user?.twoFactorEnabled && (
                 <Form handleSubmit={onConfirm} className="pb-4" form={form}>
                   <TwoFactor center={false} />
                 </Form>
@@ -240,39 +260,3 @@ const ProfileView = (props: inferSSRProps<typeof getServerSideProps>) => {
 ProfileView.getLayout = getLayout;
 
 export default ProfileView;
-
-export const getServerSideProps = async (context: GetServerSidePropsContext) => {
-  const session = await getSession(context);
-
-  if (!session?.user?.id) {
-    return { redirect: { permanent: false, destination: "/auth/login" } };
-  }
-
-  const user = await prisma.user.findUnique({
-    where: {
-      id: session.user.id,
-    },
-    select: {
-      id: true,
-      username: true,
-      email: true,
-      name: true,
-      bio: true,
-      avatar: true,
-      twoFactorEnabled: true,
-    },
-  });
-
-  if (!user) {
-    throw new Error("User seems logged in but cannot be found in the db");
-  }
-
-  return {
-    props: {
-      user: {
-        ...user,
-        emailMd5: crypto.createHash("md5").update(user.email).digest("hex"),
-      },
-    },
-  };
-};

apps/web/public/static/locales/en/common.json

@@ -1239,5 +1239,8 @@
   "password_reset_leading":"If you did not receive the email soon, check that the email address you entered is correct, check your spam folder or reach out to support if the issue persists.",
   "password_updated":"Password updated!",
   "pending_payment": "Pending payment",
-  "confirmation_page_rainbow": "Token gate your event with tokens or NFTs on Ethereum, Polygon, and more."
+  "confirmation_page_rainbow": "Token gate your event with tokens or NFTs on Ethereum, Polygon, and more.",
+  "no_calendar_installed": "No calendar installed",
+  "no_calendar_installed_description": "You have not yet connected any of your calendars",
+  "add_a_calendar": "Add a calendar"
 }

packages/trpc/server/routers/viewer.tsx

@@ -176,6 +176,10 @@ const loggedInViewerRouter = createProtectedRouter()
         darkBrandColor: user.darkBrandColor,
         plan: user.plan,
         away: user.away,
+        bio: user.bio,
+        weekStart: user.weekStart,
+        theme: user.theme,
+        hideBranding: user.hideBranding,
       };
     },
   })

packages/ui/v2/core/layouts/SettingsLayout.tsx

@@ -310,7 +310,7 @@ export default function SettingsLayout({
         <MobileSettingsContainer onSideContainerOpen={() => setSideContainerOpen(!sideContainerOpen)} />
       }>
       <div className="flex flex-1 [&>*]:flex-1">
-        <div className="mx-auto max-w-4xl justify-center">
+        <div className="mx-auto max-w-xs justify-center md:max-w-3xl">
           <ShellHeader />
           <ErrorBoundary>{children}</ErrorBoundary>
         </div>
@@ -325,7 +325,7 @@ function ShellHeader() {
   const { meta } = useMeta();
   const { t, isLocaleReady } = useLocale();
   return (
-    <header className="mx-auto block max-w-4xl justify-between pt-12 sm:flex sm:pt-8">
+    <header className="mx-auto block max-w-xs justify-between pt-12 sm:flex sm:pt-8 md:max-w-3xl">
       <div className="mb-8 flex w-full items-center border-b border-gray-200 pb-8">
         {meta.backButton && (
           <a href="javascript:history.back()">