App Store Loading Imporvement

apps/web/components/apps/Categories.tsx

@@ -2,6 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { SkeletonText } from "@calcom/ui";
 
 export default function AppStoreCategories({
  categories,
@@ -11,7 +12,7 @@ export default function AppStoreCategories({
  count: number;
  }[];
 }) {
- const { t } = useLocale();
+ const { t, isLocaleReady } = useLocale();
  return (
  <div className="mb-16">
  <h2 className="mb-2 text-lg font-semibold text-gray-900">{t("popular_categories")}</h2>
@@ -31,8 +32,16 @@ export default function AppStoreCategories({
  />
  </div>
  <div className="self-center">
- <h3 className="font-medium capitalize">{category.name}</h3>
- <p className="text-sm text-gray-500">{category.count} apps</p>
+ {isLocaleReady ? (
+ <h3 className="font-medium capitalize">{category.name}</h3>
+ ) : (
+ <SkeletonText />
+ )}
+ {isLocaleReady ? (
+ <p className="text-sm text-gray-500">{category.count} apps</p>
+ ) : (
+ <SkeletonText />
+ )}
  </div>
  </a>
  </Link>

apps/web/pages/v2/apps/categories/[category].tsx

@@ -7,11 +7,12 @@ import { getAppRegistry } from "@calcom/app-store/_appRegistry";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { Icon } from "@calcom/ui/Icon";
+import { SkeletonText } from "@calcom/ui/v2";
 import Shell from "@calcom/ui/v2/core/Shell";
 import AppCard from "@calcom/ui/v2/core/apps/AppCard";
 
 export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticProps>) {
- const { t } = useLocale();
+ const { t, isLocaleReady } = useLocale();
  const router = useRouter();
  const { category } = router.query;
 
@@ -22,7 +23,7 @@ export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticP
  <Link href="/apps">
  <a className="inline-flex items-center justify-start gap-1 rounded-sm py-2 text-gray-900">
  <Icon.FiArrowLeft className="h-4 w-4" />
- {t("app_store")}{" "}
+ {isLocaleReady ? t("app_store") : <SkeletonText className="h-4 w-24" />}{" "}
  </a>
  </Link>
  {category && (

apps/web/pages/v2/apps/categories/index.tsx

@@ -5,17 +5,18 @@ import { getAppRegistry } from "@calcom/app-store/_appRegistry";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui/Icon";
 import Shell from "@calcom/ui/Shell";
+import { SkeletonText } from "@calcom/ui/v2";
 
 export default function Apps({ categories }: InferGetStaticPropsType<typeof getStaticProps>) {
- const { t } = useLocale();
+ const { t, isLocaleReady } = useLocale();
 
  return (
  <Shell isPublic large>
  <div className="text-md flex items-center gap-1 px-4 pb-3 pt-3 font-normal md:px-8 lg:px-0 lg:pt-0">
  <Link href="/apps">
  <a className="inline-flex items-center justify-start gap-1 rounded-sm py-2 text-gray-900">
  <Icon.FiArrowLeft className="h-4 w-4" />
- {t("app_store")}{" "}
+ {isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
  </a>
  </Link>
  </div>

packages/features/users/components/UserV2OptInBanner.tsx

@@ -1,10 +1,16 @@
+import { useEffect, useState } from "react";
+
 function UserV2OptInBanner() {
+ const [v2OptInCookie, setV2OptInCookie] = useState<boolean | null>(null);
  // Only show on client-side
- if (typeof document === "undefined") return null;
-
- const hasV2OptInCookie = document.cookie.includes("calcom-v2-early-access=1");
+ useEffect(() => {
+ setV2OptInCookie(document.cookie.includes("calcom-v2-early-access=1"));
+ }, []);
 
- if (hasV2OptInCookie)
+ if (!v2OptInCookie) {
+ return null;
+ }
+ if (v2OptInCookie)
  return (
  <p className="text-xs text-gray-400">
  You&apos;re using the new version of Cal.com.{" "}

packages/ui/v2/core/Shell.tsx

@@ -429,7 +429,7 @@ const navigation: NavigationItemType[] = [
  name: "installed_apps",
  href: "/apps/installed/calendar",
  isCurrent: ({ router }) => {
- return router.pathname.startsWith("/apps/installed/");
+ return router.asPath.startsWith("/apps/installed/");
  },
  },
  ],
@@ -652,7 +652,10 @@ function DeploymentInfo() {
 function SideBarContainer() {
  const { status } = useSession();
  const router = useRouter();
- if (status !== "authenticated") return null;
+ // Make sure that Sidebar is rendered optimistically so that a refresh of pages when logged in have SideBar from the beginning.
+ // This improves the experience of refresh on app store pages(when logged in) which are SSG.
+ // Though when logged out, app store pages would temporarily show SideBar until session status is confirmed.
+ if (status !== "loading" && status !== "authenticated") return null;
  if (router.route.startsWith("/v2/settings/")) return null;
  return <SideBar />;
 }
@@ -741,12 +744,12 @@ export function ShellMain(props: LayoutProps) {
  <div className="hidden w-full ltr:mr-4 rtl:ml-4 sm:block">
  {props.heading && (
  <h1 className="font-cal mb-1 text-xl font-bold capitalize tracking-wide text-black">
- {!isLocaleReady ? null : props.heading}
+ {!isLocaleReady ? <SkeletonText /> : props.heading}
  </h1>
  )}
  {props.subtitle && (
  <p className="hidden text-sm text-neutral-500 sm:block">
- {!isLocaleReady ? null : props.subtitle}
+ {!isLocaleReady ? <SkeletonText /> : props.subtitle}
  </p>
  )}
  </div>

packages/ui/v2/core/apps/AppCard.tsx

@@ -9,6 +9,8 @@ import { App } from "@calcom/types/App";
 import { Icon } from "@calcom/ui/Icon";
 import Button from "@calcom/ui/v2/core/Button";
 
+import { SkeletonText } from "../skeleton";
+
 interface AppCardProps {
  app: App;
  credentials?: Credential[];
@@ -17,7 +19,7 @@ interface AppCardProps {
 export default function AppCard({ app, credentials }: AppCardProps) {
  const { t } = useLocale();
  const { data: user } = trpc.useQuery(["viewer.me"]);
-
+ const { isLocaleReady } = useLocale();
  const mutation = useAddAppMutation(null, {
  onSuccess: () => {
  showToast(t("app_successfully_installed"), "success");
@@ -56,7 +58,7 @@ export default function AppCard({ app, credentials }: AppCardProps) {
  </p>
  <div className="mt-5 flex max-w-full flex-row justify-between gap-2 [@media(max-width:260px)]:flex-wrap">
  <Button color="secondary" className="flex w-32 flex-grow justify-center" href={"/apps/" + app.slug}>
- {t("details")}
+ {isLocaleReady ? t("details") : <SkeletonText className="h-4 w-24" />}
  </Button>
  {app.isGlobal || (credentials && credentials.length > 0 && allowedMultipleInstalls)
  ? !app.isGlobal && (

packages/ui/v2/core/apps/Categories.tsx

@@ -3,6 +3,7 @@ import { ArrowRight } from "react-feather";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
+import { InvisibleSkeletonText } from "../skeleton";
 import Slider from "./Slider";
 
 export default function AppStoreCategories({
@@ -13,7 +14,7 @@ export default function AppStoreCategories({
  count: number;
  }[];
 }) {
- const { t } = useLocale();
+ const { t, isLocaleReady } = useLocale();
  return (
  <div className="mb-16">
  <Slider
@@ -35,9 +36,13 @@ export default function AppStoreCategories({
  data-testid={`app-store-category-${category.name}`}
  className="bg-gradient-from-bl relative flex rounded-md bg-gradient-to-tr from-neutral-300 to-slate-500 sm:block">
  <div className="w-full self-center bg-[url('/noise.png')] bg-cover bg-center bg-no-repeat px-6 py-4">
- <h3 className="font-medium capitalize">{category.name}</h3>
+ {isLocaleReady ? (
+ <h3 className="font-medium capitalize">{category.name}</h3>
+ ) : (
+ <InvisibleSkeletonText />
+ )}
  <p className="text-sm text-gray-500">
- {t("number_apps", { count: category.count })}{" "}
+ {isLocaleReady ? t("number_apps", { count: category.count }) : <InvisibleSkeletonText />}{" "}
  <ArrowRight className="inline-block h-4 w-4" />
  </p>
  </div>

packages/ui/v2/core/apps/Slider.tsx

@@ -3,8 +3,11 @@ import "@glidejs/glide/dist/css/glide.core.min.css";
 import "@glidejs/glide/dist/css/glide.theme.min.css";
 import { useEffect, useRef } from "react";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui/Icon";
 
+import { SkeletonText } from "../skeleton";
+
 const Slider = <T extends string | unknown>({
  title = "",
  className = "",
@@ -22,7 +25,7 @@ const Slider = <T extends string | unknown>({
 }) => {
  const glide = useRef(null);
  const slider = useRef<Glide.Properties | null>(null);
-
+ const { isLocaleReady } = useLocale();
  useEffect(() => {
  if (glide.current) {
  slider.current = new Glide(glide.current, {
@@ -45,10 +48,14 @@ const Slider = <T extends string | unknown>({
  </style>
  <div className="glide" ref={glide}>
  <div className="flex cursor-default">
- {title && (
- <div>
- <h2 className="mt-0 mb-2 text-lg font-semibold text-gray-900">{title}</h2>
- </div>
+ {isLocaleReady ? (
+ title && (
+ <div>
+ <h2 className="mt-0 mb-2 text-lg font-semibold text-gray-900">{title}</h2>
+ </div>
+ )
+ ) : (
+ <SkeletonText className="h-4 w-24" />
  )}
  <div className="glide__arrows ml-auto" data-glide-el="controls">
  <button data-glide-dir="<" className="mr-4">

packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx

@@ -6,6 +6,8 @@ import { MouseEventHandler } from "react";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
+import { SkeletonText } from "../../skeleton";
+
 export type HorizontalTabItemProps = {
  name: string;
  disabled?: boolean;
@@ -25,7 +27,7 @@ export type HorizontalTabItemProps = {
 
 const HorizontalTabItem = ({ name, href, tabName, ...props }: HorizontalTabItemProps) => {
  const router = useRouter();
- const { t } = useLocale();
+ const { t, isLocaleReady } = useLocale();
  let newHref = "";
  let isCurrent;
  if (href) {
@@ -59,7 +61,7 @@ const HorizontalTabItem = ({ name, href, tabName, ...props }: HorizontalTabItemP
  props.className
  )}
  aria-current={isCurrent ? "page" : undefined}>
- {t(name)}
+ {isLocaleReady ? t(name) : <SkeletonText className="h-4 w-24" />}
  </a>
  </Link>
  );

packages/ui/v2/core/skeleton/index.tsx

@@ -25,6 +25,16 @@ const SkeletonText: React.FC<SkeletonBaseProps> = ({ className = "" }) => {
  );
 };
 
+const InvisibleSkeletonText: React.FC<SkeletonBaseProps> = ({ className = "" }) => {
+ return (
+ <span
+ className={classNames(
+ `font-size-0 dark:white-300 animate-pulse rounded-md bg-gray-300 opacity-0 empty:before:inline-block empty:before:content-['']`,
+ className
+ )}
+ />
+ );
+};
 const SkeletonButton: React.FC<SkeletonBaseProps> = ({ className }) => {
  return (
  <SkeletonContainer>
@@ -38,4 +48,4 @@ const SkeletonContainer: React.FC<SkeletonContainer> = ({ children, as, classNam
  return <Component className={classNames("animate-pulse", className)}>{children}</Component>;
 };
 
-export { SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer };
+export { SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer, InvisibleSkeletonText };