abhirajadhikary06 / abhirajadhikary06/eventstack

Enhancement: Add Styled Fallback UI for Disabled JavaScript

Offen
#108 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
Python
Sterne
20
Forks
59
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

****📝 Enhancement: Add Styled Fallback UI for Disabled JavaScript****

The application currently displays a default browser message or a blank screen when JavaScript is disabled. While this is expected behavior #for a React SPA, a styled fallback UI would offer a more professional and informative experience.

**🐛 Issue Identified**

1. The app fails to display any meaningful or branded message if JavaScript is disabled in the browser.

2.. Default browser message:

**> “You need to enable JavaScript to run this app.”**

3. This lacks branding, user-friendliness, and clear guidance.

**🎯 Proposed Improvement**

**✅ Fallback UI Implementation**

-Add a styled message using the **``** tag.
-Display branded fallback content (e.g., logo, colors).
- Message should explain that JavaScript is required for full functionality and how to enable it.
- Example message:

> This application requires JavaScript to function. Please enable JavaScript in your browser settings to continue.

**✅ Expected Benefits**

* **Better User Experience**: Users understand why the app isn’t loading.
* **Branding**: Consistent look and feel, even in edge cases.
* **Clarity**: Clear call-to-action for users unfamiliar with browser settings.
* **Best Practices**: Adds graceful degradation support.

**🔧 Implementation Plan**

* [x] Add a **``** tag to the root `index.html` or main `App` component.
* [x] Design a simple fallback screen using the existing CSS styling.
* [x] Include instructions or links on how to enable JavaScript.
* [x] Test behavior across Chrome, Firefox, and Edge with JS disabled.

**📸 Files to be Modified**

- `public/index.html` – Add `` block
**or**
- `src/App.js` – If dynamically handled in component rendering

**🏷️ Labels**

* `enhancement`
* `frontend`
* `good first issue`
* `ux`
* `GSSoC 2025`

**💡 Additional Context**

This enhancement improves the app's professionalism and user guidance in rare but possible scenarios. It doesn’t affect core functionality and is ideal for newcomers contributing under GSSoC.

- ****Priority**: LOW – Small improvement, but great for developer polish.**

Image

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.