Files
aliasvault/apps/server/AliasVault.Client/Main/Components/Email/EmailRowSkeleton.razor

41 lines
1.9 KiB
Plaintext

@using Microsoft.AspNetCore.Components
<li class="hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out">
<div class="p-4 flex justify-start items-start">
<div class="mr-4 flex-shrink-0">
<SkeletonBase Height="40" AdditionalClasses="rounded-full w-10">
<div class="w-full h-full rounded-full bg-gray-300 dark:bg-gray-700"></div>
</SkeletonBase>
</div>
<div class="flex-grow min-w-0">
<div class="flex items-start justify-between">
<div class="flex-grow min-w-0 mr-2">
<!-- From Name (top, prominent) -->
<div class="mb-1">
<SkeletonBase Height="18" AdditionalClasses="w-40">
<div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded"></div>
</SkeletonBase>
</div>
<!-- Subject (smaller, below from) -->
<div class="mb-1">
<SkeletonBase Height="16" AdditionalClasses="w-48">
<div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded"></div>
</SkeletonBase>
</div>
<!-- Message Preview (single line) -->
<div>
<SkeletonBase Height="12" AdditionalClasses="w-64">
<div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded"></div>
</SkeletonBase>
</div>
</div>
<!-- Date (compact format) -->
<div class="flex-shrink-0">
<SkeletonBase Height="12" AdditionalClasses="w-10">
<div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded"></div>
</SkeletonBase>
</div>
</div>
</div>
</div>
</li>