Skip to content

Commit 14e8a9f

Browse files
edyseguraedysegura
committed
feat: enhance user loading experience with loading state and error handling with PicoCSS design
1 parent 04c60c2 commit 14e8a9f

File tree

2 files changed

+70
-13
lines changed

2 files changed

+70
-13
lines changed

‎dynamic-import/app.js‎

Lines changed: 44 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,56 @@
1-
const button = document.querySelector('button')
1+
const button = document.querySelector('#load-btn')
22

33
button.addEventListener('click', loadUsers)
44

55
async function loadUsers() {
6-
const module = await import('./data.json', { with: { type: 'json' } })
7-
const {
8-
default: { users },
9-
} = module
10-
console.log('loading users...', users)
11-
listUsers(users)
6+
try {
7+
// Show loading state
8+
button.disabled = true
9+
button.textContent = 'Loading...'
10+
11+
const module = await import('./data.json', { with: { type: 'json' } })
12+
const {
13+
default: { users },
14+
} = module
15+
console.log('loading users...', users)
16+
listUsers(users)
17+
} catch (error) {
18+
console.error('Error loading users:', error)
19+
showError('Failed to load users. Please try again.')
20+
} finally {
21+
// Reset button state
22+
button.disabled = false
23+
button.textContent = 'Load Users'
24+
}
1225
}
1326

1427
function listUsers(users) {
1528
const div = document.querySelector('#users')
1629
const generatedHTML = `
17-
<uL>
18-
${users.map((user) => `<li>${user}</li>`).join('')}
19-
</ul>
30+
<div class="grid">
31+
${users
32+
.map(
33+
(user, index) => `
34+
<article class="card">
35+
<header>
36+
<h4>User ${index + 1}</h4>
37+
</header>
38+
<p><strong>Name:</strong> ${user}</p>
39+
</article>
40+
`,
41+
)
42+
.join('')}
43+
</div>
2044
`
2145
div.innerHTML = generatedHTML
2246
}
47+
48+
function showError(message) {
49+
const div = document.querySelector('#users')
50+
div.innerHTML = `
51+
<article class="alert">
52+
<h4>Error</h4>
53+
<p>${message}</p>
54+
</article>
55+
`
56+
}

‎dynamic-import/index.html‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,34 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Dynamic Import</title>
7+
<link
8+
rel="stylesheet"
9+
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
10+
/>
711
<script type="module" src="app.js"></script>
812
</head>
913
<body>
10-
<h1>Dynamic Import</h1>
11-
<button>Load Users</button>
12-
<div id="users"></div>
14+
<main class="container">
15+
<header class="container">
16+
<h1>Dynamic Import Demo</h1>
17+
<p>Demonstrating dynamic import of JSON data with responsive design</p>
18+
</header>
19+
20+
<section class="container">
21+
<button id="load-btn">Load Users</button>
22+
</section>
23+
24+
<section class="container">
25+
<div id="users">
26+
<article>
27+
<h3>Users will appear here</h3>
28+
<p>
29+
Click the "Load Users" button above to fetch and display the user
30+
list.
31+
</p>
32+
</article>
33+
</div>
34+
</section>
35+
</main>
1336
</body>
1437
</html>

0 commit comments

Comments
 (0)