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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
import { style } from "@vanilla-extract/css"
import { themeContract } from "../styles/theme.css"
import { animations } from "../styles"
/**
* Loading indicator container
* Positioned top-left, below spaces dropdown
*/
export const loadingContainer = style({
position: "absolute",
zIndex: 30, // High priority so it's visible when loading
borderRadius: themeContract.radii.xl,
overflow: "hidden",
top: "5.5rem", // Below spaces dropdown (~88px)
left: themeContract.space[4],
})
/**
* Content wrapper
*/
export const loadingContent = style({
position: "relative",
zIndex: 10,
color: themeContract.colors.text.secondary,
paddingLeft: themeContract.space[4],
paddingRight: themeContract.space[4],
paddingTop: themeContract.space[3],
paddingBottom: themeContract.space[3],
})
/**
* Flex container for icon and text
*/
export const loadingFlex = style({
display: "flex",
alignItems: "center",
gap: themeContract.space[2],
})
/**
* Spinning icon
*/
export const loadingIcon = style({
width: "1rem",
height: "1rem",
animation: `${animations.spin} 1s linear infinite`,
color: themeContract.colors.memory.border,
})
/**
* Loading text
*/
export const loadingText = style({
fontSize: themeContract.typography.fontSize.sm,
})
|