Skip to content

DROPDOWN_LOADING_STATES.md

Latest commit

 

History

History
102 lines (75 loc) · 3.31 KB

DROPDOWN_LOADING_STATES.md

File metadata and controls

102 lines (75 loc) · 3.31 KB

Dropdown Loading States - IMPLEMENTED

Changes Made

1. Disabled State During Loading

The year and method dropdowns are now disabled (grayed out) while data is being loaded:

  • County dropdown changed → Year and Method dropdowns disabled
  • Year dropdown populated → Year dropdown enabled, Method still disabled
  • Method dropdown populated → Method dropdown enabled
  • Data loaded → All dropdowns enabled

2. Visual Feedback

Disabled dropdowns have reduced opacity (0.5) to clearly show they're not interactive yet.

3. "No data available" Message

If a county has no data for any year, or a year has no voting methods, the dropdown shows "No data available" instead of being empty.

Implementation Details

File: WhoVoted/public/dataset-selector-v2.js

populateYearDropdown()

populateYearDropdown() {
    // Disable year and method dropdowns while loading
    this.yearSelect.disabled = true;
    this.methodSelect.disabled = true;
    this.yearSelect.style.opacity = '0.5';
    this.methodSelect.style.opacity = '0.5';
    
    // ... populate years ...
    
    // Re-enable year dropdown when done
    this.yearSelect.disabled = false;
    this.yearSelect.style.opacity = '1';
    
    this.populateMethodDropdown();
}

populateMethodDropdown()

populateMethodDropdown() {
    // Keep method dropdown disabled while loading
    this.methodSelect.disabled = true;
    this.methodSelect.style.opacity = '0.5';
    
    // ... populate methods ...
    
    // Re-enable method dropdown when done
    this.methodSelect.disabled = false;
    this.methodSelect.style.opacity = '1';
    
    this.loadCurrentDataset();
}

User Experience

Before

  • All dropdowns always enabled
  • User could select options before data was ready
  • Confusing when dropdowns showed wrong data

After

  • Clear visual feedback when dropdowns are loading
  • User can't interact with dropdowns until data is ready
  • Prevents selecting invalid combinations

Testing

  1. Select a county (e.g., "Angelina")
  2. Observe: Year and Method dropdowns become grayed out
  3. After ~100ms: Year dropdown becomes enabled, shows available years
  4. After ~100ms more: Method dropdown becomes enabled, shows available methods
  5. Map loads with correct county data

Known Issues to Address

Issue: Stats Box Still Shows Wrong County

The stats box at the top may still show "Hidalgo County" even when a different county is selected. This is because:

  1. The updateDatasetStatsBox() function in data.js uses selectedCountyFilter variable
  2. The _fetchAndDisplayStats() function also uses selectedCountyFilter
  3. These need to be updated BEFORE the dataset is loaded

Status: The selectedCountyFilter is being updated in onCountyChange(), but there may be a timing issue or the stats box isn't being refreshed properly.

Next Steps:

  • Verify selectedCountyFilter is set correctly before loadDataset() is called
  • Add console logging to track when stats box is updated
  • Ensure stats box refresh happens AFTER new data is loaded

Deployment

  • Commit: 3c06297
  • Deployed to: /opt/whovoted
  • Users need hard refresh (Ctrl+Shift+R)

Related Documents

  • COUNTY_SELECTION_FIX.md - County selection and filtering fixes
  • THREE_DROPDOWN_FIX_COMPLETE.md - Initial three-dropdown implementation