message skeleton

src/components/Common/UseSkeletons.tsx

@@ -68,6 +68,22 @@ export const FacilityOrganizationSkeleton = () => {
   );
 };
 
+export const MessageSkeleton = () => (
+  <div className="space-y-4">
+    {Array.from({ length: 3 }).map((_, i) => (
+      <div key={i} className="p-4 rounded-lg bg-gray-100 animate-pulse">
+        <div className="flex items-start gap-3">
+          <div className="w-8 h-8 rounded-full bg-gray-200" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-4 w-3/4" />
+          </div>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
 export const OrganizationIndexSkeleton = () => {
   const { t } = useTranslation();
   return (

src/pages/Encounters/tabs/EncounterNotesTab.tsx

@@ -34,7 +34,6 @@ import { Input } from "@/components/ui/input";
 import { Markdown } from "@/components/ui/markdown";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
-import { Skeleton } from "@/components/ui/skeleton";
 import { Textarea } from "@/components/ui/textarea";
 import {
   Tooltip,
@@ -45,6 +44,7 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 import Loading from "@/components/Common/Loading";
+import { MessageSkeleton } from "@/components/Common/UseSkeletons";
 
 import useAuthUser from "@/hooks/useAuthUser";
 
@@ -69,23 +69,6 @@ const threadTemplates = [
   "Lab Results Discussion",
 ] as const;
 
-// Component to display loading skeleton for messages
-const MessageSkeleton = () => (
-  <div className="space-y-4">
-    {Array.from({ length: 3 }).map((_, i) => (
-      <div key={i} className="p-4 rounded-lg bg-gray-100 animate-pulse">
-        <div className="flex items-start gap-3">
-          <div className="w-8 h-8 rounded-full bg-gray-200" />
-          <div className="flex-1 space-y-2">
-            <Skeleton className="h-4 w-24" />
-            <Skeleton className="h-4 w-3/4" />
-          </div>
-        </div>
-      </div>
-    ))}
-  </div>
-);
-
 // Info tooltip component for help text
 const InfoTooltip = ({ content }: { content: string }) => (
   <TooltipProvider>