Skeleton

Variants

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

›

import { html, renderApp } from 'mates';

import { Skeleton, Text } from 'mates-ui';

const App = () => () => html`

<x-col gap="var(--md-space-4)" style="max-width:22.5rem;width:100%;">

<x-col gap="var(--md-space-2)">

${Text("rect", { type: "label-sm", color: "muted" })}

${Skeleton({ variant: "rect", width: "100%", height: "5rem" })}

</x-col>

<x-col gap="var(--md-space-2)">

${Text("text — 1 line", { type: "label-sm", color: "muted" })}

${Skeleton({ variant: "text", width: "80%", height: "0.88rem" })}

</x-col>

<x-col gap="var(--md-space-2)">

${Text("text — 4 lines", { type: "label-sm", color: "muted" })}

${Skeleton({ variant: "text", lines: 4, height: "0.88rem" })}

</x-col>

<x-col gap="var(--md-space-2)">

${Text("circle", { type: "label-sm", color: "muted" })}

<x-row gap="var(--md-space-3)" align="center">

${Skeleton({ variant: "circle", width: "2rem" })}

${Skeleton({ variant: "circle", width: "2.5rem" })}

${Skeleton({ variant: "circle", width: "3.5rem" })}

</x-row>

</x-col>

</x-col>

`;

renderApp(App, document.getElementById('app'));

---

Multi-line text

99

1

2

3

4

5

6

7

8

9

10

11

12

›

import { html, renderApp } from 'mates';

import { Skeleton } from 'mates-ui';

const App = () => () => html`

<x-col gap="var(--md-space-4)" style="max-width:22.5rem;width:100%;">

${Skeleton({ variant: "text", lines: 2, height: "0.88rem" })}

${Skeleton({ variant: "text", lines: 5, height: "0.88rem" })}

${Skeleton({ variant: "text", lines: 8, height: "0.88rem" })}

</x-col>

`;

renderApp(App, document.getElementById('app'));

---

Profile card skeleton

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

›

import { html, renderApp } from 'mates';

import { Skeleton } from 'mates-ui';

const App = () => () => html`

<div style="display:flex;gap:var(--md-space-4);align-items:flex-start;

padding:var(--md-space-5);border-radius:var(--md-radius-lg);

background:var(--md-color-surface-raised);max-width:25rem;

box-shadow:var(--md-shadow-1);">

${Skeleton({ variant: "circle", width: "3rem" })}

<div style="display:flex;flex-direction:column;gap:var(--md-space-2);flex:1;">

${Skeleton({ variant: "text", width: "55%", height: "1rem" })}

${Skeleton({ variant: "text", width: "35%", height: "0.75rem" })}

<div style="margin-top:var(--md-space-2);">

${Skeleton({ variant: "text", lines: 3, height: "0.81rem" })}

</div>

<div style="display:flex;gap:var(--md-space-2);margin-top:var(--md-space-2);">

${Skeleton({ variant: "rect", width: "4.5rem", height: "2rem" })}

${Skeleton({ variant: "rect", width: "4.5rem", height: "2rem" })}

</div>

</div>

</div>

`;

renderApp(App, document.getElementById('app'));

---

Loading vs loaded comparison

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

›

⌄

⌄

import { html, atom, renderApp } from 'mates';

import { Avatar, Skeleton, Text, FilledButton } from 'mates-ui';

const App = () => {

const loaded = atom(false);

return () => html`

<x-col gap="var(--md-space-4)" style="max-width:22rem;width:100%;">

${FilledButton(loaded() ? "Show skeleton" : "Show loaded", {

size: "sm",

onClick: () => loaded.set((v) => !v),

})}

<div style="padding:var(--md-space-4);border-radius:var(--md-radius-lg);

background:var(--md-color-surface-raised);box-shadow:var(--md-shadow-1);">

${loaded() ? html`

<div style="display:flex;gap:var(--md-space-3);align-items:center;margin-bottom:var(--md-space-3);">

${Avatar({ name: "Alex Kim", size: "sm" })}

<div>

${Text("Alex Kim", { type: "label-md" })}

${Text("Product Designer", { type: "label-sm", color: "muted" })}

</div>

</div>

${Text("Working on design systems and component libraries.", { type: "body-sm", color: "muted" })}

` : html`

<div style="display:flex;gap:var(--md-space-3);align-items:center;margin-bottom:var(--md-space-3);">

${Skeleton({ variant: "circle", width: "2.25rem" })}

<div style="display:flex;flex-direction:column;gap:var(--md-space-1);flex:1;">

${Skeleton({ variant: "text", width: "60%", height: "0.81rem" })}

${Skeleton({ variant: "text", width: "40%", height: "0.69rem" })}

</div>

</div>

${Skeleton({ variant: "text", lines: 2, height: "0.81rem" })}

`}

</div>

</x-col>

`;

};

---

Feed / list skeleton

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

›

import { html, renderApp } from 'mates';

import { Skeleton } from 'mates-ui';

const App = () => () => html`

<x-col gap="var(--md-space-4)" style="max-width:26rem;width:100%;">

${[1, 2, 3].map(() => html`

<div style="display:flex;gap:var(--md-space-3);align-items:center;">

${Skeleton({ variant: "circle", width: "2.5rem" })}

<div style="display:flex;flex-direction:column;gap:var(--md-space-2);flex:1;">

${Skeleton({ variant: "text", width: "50%", height: "0.88rem" })}

${Skeleton({ variant: "text", width: "75%", height: "0.75rem" })}

</div>

${Skeleton({ variant: "rect", width: "3.5rem", height: "1.25rem" })}

</div>

`)}

</x-col>

`;

renderApp(App, document.getElementById('app'));

---

Table skeleton

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

›

import { html, renderApp } from 'mates';

import { Skeleton } from 'mates-ui';

const App = () => () => html`

<x-col gap="var(--md-space-2)" style="max-width:32rem;width:100%;">

<div style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--md-space-3);padding:var(--md-space-2) 0;">

${Skeleton({ variant: "rect", width: "100%", height: "0.75rem" })}

${Skeleton({ variant: "rect", width: "100%", height: "0.75rem" })}

${Skeleton({ variant: "rect", width: "100%", height: "0.75rem" })}

</div>

${[1, 2, 3, 4].map(() => html`

<div style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--md-space-3);

padding:var(--md-space-2) 0;border-top:0.06rem solid var(--md-color-divider);">

${Skeleton({ variant: "text", width: "100%", height: "0.88rem" })}

${Skeleton({ variant: "text", width: "80%", height: "0.88rem" })}

${Skeleton({ variant: "rect", width: "3.25rem", height: "1.38rem" })}

</div>

`)}

</x-col>

`;

renderApp(App, document.getElementById('app'));