From afe957674c490987c2c688b44c6cc3f387a7169e Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Mon, 25 Apr 2022 21:18:07 +0100
Subject: [PATCH] Adding avatar skeleton loader (#2600)

---
 .../components/eventtype/SkeletonLoader.tsx   | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/eventtype/SkeletonLoader.tsx b/apps/web/components/eventtype/SkeletonLoader.tsx
index ed77feb633..8960352bcc 100644
--- a/apps/web/components/eventtype/SkeletonLoader.tsx
+++ b/apps/web/components/eventtype/SkeletonLoader.tsx
@@ -4,11 +4,20 @@ import React from "react";
 
 function SkeletonLoader() {
   return (
-    <ul className="animate-pulse divide-y divide-neutral-200 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
-      <SkeletonItem />
-      <SkeletonItem />
-      <SkeletonItem />
-    </ul>
+    <div className="animate-pulse">
+      <div className="mb-4 flex items-center">
+        <div className="mt-1 h-8 w-8 rounded-full bg-gray-200 ltr:mr-2 rtl:ml-2" />
+        <div className="space-y-1">
+          <div className="h-4 w-16 rounded-md bg-gray-200"></div>
+          <div className="h-4 w-24 rounded-md bg-gray-200"></div>
+        </div>
+      </div>
+      <ul className="animate-pulse divide-y divide-neutral-200 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+        <SkeletonItem />
+        <SkeletonItem />
+        <SkeletonItem />
+      </ul>
+    </div>
   );
 }