LoadingState
AppSkeleton loading animations. Variants: spinner / table / cards / list / detail / form.
<%- include('modules/app/LoadingState', { variant: 'spinner' }) %><%- include('modules/app/LoadingState', { variant: 'table', rows: 5, cols: 4 }) %><%- include('modules/app/LoadingState', { variant: 'cards', cards: 3 }) %><%- include('modules/app/LoadingState', { variant: 'list', rows: 4 }) %><%- include('modules/app/LoadingState', { variant: 'form', rows: 3 }) %><%
var _variant = locals.variant || 'spinner';
var _rows = locals.rows || 5;
var _cols = locals.cols || 4;
var _cards = locals.cards || 3;
%>
<% if (_variant === 'spinner') { %>
<%- include('../ui/Spinner', { size: 'lg' }) %>
<% } else if (_variant === 'table') { %>
<% for (var c = 0; c < _cols; c++) { %>
<% for (var r = 0; r < _rows; r++) { %>
<%- include('../ui/Skeleton', { variant: 'tableRow', cols: _cols }) %>
<% } %>
<% } else if (_variant === 'cards') { %>
<% for (var i = 0; i < _cards; i++) { %>
<%- include('../ui/Skeleton', { variant: 'card' }) %>
<% } %>
<% } else if (_variant === 'list') { %>
<% for (var i = 0; i < _rows; i++) { %>
-
<%- include('../ui/Skeleton', { variant: 'avatar', size: 'sm' }) %>
<%- include('../ui/Skeleton', { variant: 'line', width: 'w-1/3' }) %>
<%- include('../ui/Skeleton', { variant: 'line', width: 'w-2/3' }) %>
<% } %>
<% } else if (_variant === 'detail') { %>
<%- include('../ui/Skeleton', { variant: 'line', width: 'w-1/4' }) %>
<%- include('../ui/Skeleton', { variant: 'line', width: 'w-1/2' }) %>
<% for (var i = 0; i < 3; i++) { %>
<% } %>
<% for (var i = 0; i < 4; i++) { %>
<%- include('../ui/Skeleton', { variant: 'line', width: 'w-1/4' }) %>
<%- include('../ui/Skeleton', { variant: 'line', width: 'w-full' }) %>
<% } %>
<%- include('../ui/Skeleton', { variant: 'text', lines: 4 }) %>
<% } else if (_variant === 'form') { %>
<% for (var i = 0; i < _rows; i++) { %>
<%- include('../ui/Skeleton', { variant: 'line', width: 'w-1/4' }) %>
<% } %>
<% } %>