tyler/route-commerce
1
0
Fork 1
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: react-doctor 72→73 (skeletons restructured to divs, video tabindex)

Browse Source
This commit is contained in:
Nora
2026-06-26 05:03:28 -06:00
parent a78b0ab630
commit 7c09487058
5 changed files with 46 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/admin/MessageLogPanel.tsx
+14 -26
View File
@@ -124,33 +124,21 @@ function LogsEmptyState({ hasFilters }: { hasFilters: boolean }) {
);
}
// Loading skeleton
// Loading skeleton (rendered as a div so it doesn't get parsed as table rows)
function LogSkeleton() {
return (
<>
<div role="status" aria-live="polite" aria-busy="true" aria-label="Loading messages" className="overflow-hidden rounded-xl border border-[var(--admin-border)] bg-white">
{[1, 2, 3, 4, 5].map((i) => (
<tr key={i} className="border-b border-[var(--admin-border)]" aria-hidden="true">
<td className="px-4 py-3" aria-hidden="true">
<div className="h-3 w-20 bg-stone-200 rounded animate-pulse" aria-hidden="true" />
</td>
<td className="px-4 py-3" aria-hidden="true">
<div className="h-3 w-32 bg-stone-200 rounded animate-pulse" aria-hidden="true" />
</td>
<td className="px-4 py-3" aria-hidden="true">
<div className="h-5 w-14 bg-stone-200 rounded-full animate-pulse" aria-hidden="true" />
</td>
<td className="px-4 py-3" aria-hidden="true">
<div className="h-3 w-40 bg-stone-200 rounded animate-pulse" aria-hidden="true" />
</td>
<td className="px-4 py-3" aria-hidden="true">
<div className="h-5 w-20 bg-stone-200 rounded-full animate-pulse" aria-hidden="true" />
</td>
<td className="px-4 py-3" aria-hidden="true">
<div className="h-5 w-24 bg-stone-200 rounded-full animate-pulse" aria-hidden="true" />
</td>
</tr>
<div key={i} className="flex items-center gap-4 border-b border-[var(--admin-border)] px-4 py-3 last:border-b-0">
<div className="h-3 w-20 bg-stone-200 rounded animate-pulse" />
<div className="h-3 w-32 bg-stone-200 rounded animate-pulse" />
<div className="h-5 w-14 bg-stone-200 rounded-full animate-pulse" />
<div className="h-3 w-40 bg-stone-200 rounded animate-pulse" />
<div className="h-5 w-20 bg-stone-200 rounded-full animate-pulse" />
<div className="h-5 w-24 bg-stone-200 rounded-full animate-pulse" />
</div>
))}
</>
</div>
);
}
@@ -386,9 +374,9 @@ export default function MessageLogPanel({ brandId }: { brandId?: string }) {
<th className="text-left px-4 py-3.5 font-semibold text-stone-500 text-xs uppercase tracking-wider">Engagement</th>
</tr>
</thead>
<tbody className="bg-white">
<LogSkeleton />
</tbody>
{isLoading ? (
<tbody className="bg-white" aria-busy="true"><tr><td colSpan={6}><LogSkeleton /></td></tr></tbody>
) : null}
</table>
</div>
) : paginatedLogs.length === 0 ? (