From a0ece0d77e0e5605bf5bfd1ea93fd15cb8ffc7f6 Mon Sep 17 00:00:00 2001
From: Soham Datta <78294692+sohamdata@users.noreply.github.com>
Date: Fri, 23 Jun 2023 18:44:18 +0530
Subject: [PATCH] fix: added loading skeleton for teams profile view (#9746)

Co-authored-by: Bailey Pumfleet <bailey@pumfleet.co.uk>
---
 .../ee/teams/pages/team-profile-view.tsx      | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/packages/features/ee/teams/pages/team-profile-view.tsx b/packages/features/ee/teams/pages/team-profile-view.tsx
index f9d52af683..acd3b3f70e 100644
--- a/packages/features/ee/teams/pages/team-profile-view.tsx
+++ b/packages/features/ee/teams/pages/team-profile-view.tsx
@@ -16,6 +16,7 @@ import objectKeys from "@calcom/lib/objectKeys";
 import turndown from "@calcom/lib/turndownService";
 import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
+import { SkeletonContainer, SkeletonText } from "@calcom/ui";
 import {
   Avatar,
   Button,
@@ -148,7 +149,7 @@ const ProfileView = () => {
   return (
     <>
       <Meta title={t("profile")} description={t("profile_team_description")} />
-      {!isLoading && (
+      {!isLoading ? (
         <>
           {isAdmin ? (
             <Form
@@ -326,6 +327,40 @@ const ProfileView = () => {
             </Dialog>
           )}
         </>
+      ):(
+        <>
+          <SkeletonContainer as="form">
+            <div className="flex items-center">
+              <div className="ms-4">
+                <SkeletonContainer>
+                  <div className="bg-emphasis rounded-full w-16 h-16" />
+                </SkeletonContainer>
+              </div>
+            </div>
+            <hr className="border-subtle my-8" />
+            <SkeletonContainer>
+              <div className="mt-8">
+                <SkeletonText className="w-48 h-6" />
+              </div>
+            </SkeletonContainer>
+            <SkeletonContainer>
+              <div className="mt-8">
+                <SkeletonText className="w-48 h-6" />
+              </div>
+            </SkeletonContainer>
+            <div className="mt-8">
+              <SkeletonContainer>
+                <div className="h-24 bg-emphasis rounded-md" />
+              </SkeletonContainer>
+              <SkeletonText className="w-32 h-12 mt-4" />
+            </div>
+            <SkeletonContainer>
+              <div className="mt-8">
+                <SkeletonText className="w-24 h-9" />
+              </div>
+            </SkeletonContainer>
+        </SkeletonContainer>
+      </>
       )}
     </>
   );