As developers, we often focus on the happy path—when everything works perfectly and data loads as expected. But what about when there's no data to display? In our recent update, we tackled this common but often overlooked UX challenge by implementing modal notifications for missing financial documents.
The Problem: The Dreaded "No Data" Scenario
Users need to be able to access their financial documents, for this case it would be their statements and tax documents that would need to be readily available. But what happens when there is no data available? What do we show the user then? Previously before this implementation, it would just show an empty table or nothing at all—confusing users and likely causing more problems once live in production. This would probably lead to users asking, "Where are my documents and statements?"
The Solution: Informative Modal Notifications
Our solution was clear: implement modals for both the statements and the 1099-K form when none are available. We also implemented the functionality to allow users to download their statements and 1099-K forms when available:
- Statements that aren't available yet
- Form 1099-k documents that haven't been generated
- Statements and 1099k document be downloadable
Instead of leaving users wondering why they can't see their documents or download them, this implementation provides:
- Clear explanation of the current status
- Information about when documents might become available
- A way to download the document when available
<div
class="no-statement-modal"
id="no-statement-modal"
role="dialog"
aria-labelledby="no-statement-title"
aria-describedby="no-statement-description"
>
<div class="no-statement-modal-content">
<div class="no-statement-icon">
<i class="far fa-file-alt" aria-hidden="true"></i>
</div>
<h3 class="no-statement-title">No statements available</h3>
<p class="no-statement-description">
There are currently no statements for this period.
Statements will appear here once they become available.
</p>
</div>
</div>
The code above shows the basic structure for the no statements modal, and we also use this modal for other UI displays. This starts with the parent container with the class of no-statement-modal, followed by the box modal structure capturing the content which will be displayed when there is no content or statements available. When using this modal for other implementations such as no tax documents available, or no 1099-K forms, or other similar situations, you can simply replace the h3 header and p element accordingly. This creates a basic error modal or no-data-available notification that simply lets the user know what data is not available—informing them there is not any data available and not leaving them assuming something is broken.
The Javascript
async function loadStatements(userData, statementId = "2025-01") {
const statementList = document.querySelector(".statement-list");
// clear existing content
statementList.innerHTML = "";
if (!userData || !statementId) return null;
try {
const statementDocRef = doc(
db,
"userProfiles",
userData.email,
"statements",
statementId
);
const statementSnapshot = await getDoc(statementDocRef);
if (statementSnapshot.empty) {
// show no statements modal
showNoStatementsModal(statementList);
return;
}
statementSnapshot.forEach((doc) => {
// get data from each document
const statement = doc.data();
// create html structure
const statementItem = document.createElement("div");
// download url
const downloadUrl = statement.downloadUrl || "#";
statementItem.innerHTML = `
<div class="statement-info">
<div class="icon-container">
<i class="far fa-file-alt"></i>
</div>
<div class="statement-text">
<p class="title">${statementItem.title}</p>
<p class="subtitle">${statementItem.year}</p>
</div>
</div>
<a href="${downloadUrl}" class="statement-action">
<i class="fas fa-download"></i>
<span>View Details</span>
</a>
`;
statementList.appendChild(statementItem);
});
} catch (error) {
console.log("Error occurred loading data: ", error);
}
}
// helper function
function showNoStatementsModal(container) {
container.innerHTML = `
<div
class="no-statement-modal"
id="no-statement-modal"
role="dialog"
aria-labelledby="no-statement-title"
aria-describedby="no-statement-description"
>
<div class="no-statement-modal-content">
<div class="no-statement-icon">
<i class="far fa-file-alt" aria-hidden="true"></i>
</div>
<h3 class="no-statement-title">No statements available</h3>
<p class="no-statement-description">
There are currently no statements for this period.
Statements will appear here once they become available.
</p>
</div>
</div>
`;
}
Adding CSS for Polished Look
.no-statement-modal-content {
display: none; /* until testing is done */
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem;
}
.no-statement-modal-content .no-statement-icon,
.no-form-1099k-icon {
padding: 10px 16px;
background-color: #f3f4f6;
border-radius: 25px;
}
.no-statement-icon i,
.no-form-1099k-icon i {
color: #9ca3af;
}
.no-statement-description,
.no-form-1099k-description {
font-weight: 500;
text-align: center;
margin: 0;
}
Conclusion
By implementing these modal notifications, we've significantly improved our application's user experience. Instead of leaving users confused when data is missing, we now provide clear, helpful information about the status of their documents.
This approach can be applied to any situation where data might not be available yet, helping users understand what's happening and when they might expect to see their data. Remember, handling the "no data" scenario is just as important as handling the happy path!
What strategies do you use to handle missing data in your applications? Share your thoughts in the comments below.
Top comments (0)