practice PracticeSkeleton.tsx

0% Statements 0/106
0% Branches 0/1
0% Functions 0/1
0% Lines 0/106
Press n or j to go to the next uncovered block, b, p or k for the previous block.

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { PageWithNav } from '@/components/PageWithNav'
import { css } from '../../../styled-system/css'

/**
 * Skeleton component shown while practice page data is loading
 *
 * This is used as a fallback for the Suspense boundary, but in practice
 * it should rarely be seen since data is prefetched on the server.
 */
export function PracticeSkeleton() {
  return (
    <PageWithNav>
      <main
        data-component="practice-page-skeleton"
        className={css({
          minHeight: '100vh',
          backgroundColor: 'gray.50',
          paddingTop: '2rem',
          paddingLeft: '2rem',
          paddingRight: '2rem',
          paddingBottom: '2rem',
        })}
      >
        <div
          className={css({
            maxWidth: '800px',
            margin: '0 auto',
          })}
        >
          {/* Header skeleton */}
          <header
            className={css({
              textAlign: 'center',
              marginBottom: '2rem',
            })}
          >
            <div
              className={css({
                width: '200px',
                height: '2rem',
                backgroundColor: 'gray.200',
                borderRadius: '8px',
                margin: '0 auto 0.5rem auto',
                animation: 'pulse 1.5s ease-in-out infinite',
              })}
            />
            <div
              className={css({
                width: '280px',
                height: '1rem',
                backgroundColor: 'gray.200',
                borderRadius: '4px',
                margin: '0 auto',
                animation: 'pulse 1.5s ease-in-out infinite',
              })}
            />
          </header>

          {/* Student cards skeleton */}
          <div
            className={css({
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
              gap: '1rem',
            })}
          >
            {[1, 2, 3].map((i) => (
              <div
                key={i}
                className={css({
                  backgroundColor: 'white',
                  borderRadius: '16px',
                  boxShadow: 'md',
                  padding: '1.5rem',
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  gap: '0.75rem',
                })}
              >
                <div
                  className={css({
                    width: '60px',
                    height: '60px',
                    backgroundColor: 'gray.200',
                    borderRadius: '50%',
                    animation: 'pulse 1.5s ease-in-out infinite',
                  })}
                />
                <div
                  className={css({
                    width: '100px',
                    height: '1.25rem',
                    backgroundColor: 'gray.200',
                    borderRadius: '4px',
                    animation: 'pulse 1.5s ease-in-out infinite',
                  })}
                />
              </div>
            ))}
          </div>
        </div>
      </main>
    </PageWithNav>
  )
}