Announcement bar with a new id stays hidden on first page load for users who dismissed the previous one #12646

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

When a user has dismissed an announcement bar and the site then ships a new announcement with a different themeConfig.announcementBar.id, the new bar is not shown on the first page load. It appears only after a second load.

The id is documented as the way to re-show the bar to users who closed the previous one, so the new announcement should be visible right away.

Cause. Two pieces of code decide visibility, and only one of them checks the id:

1. Inline script, before hydration. getAnnouncementBarInlineScript sets <html data-announcement-bar-initially-dismissed> from docusaurus.announcement.dismiss alone. It never reads docusaurus.announcement.id, so after the previous bar was dismissed it sets true.
2. CSS. html[data-announcement-bar-initially-dismissed='true'] .announcementBar { display: none; } in theme-classic/src/theme/AnnouncementBar/styles.module.css hides the bar.
3. React, after hydration. The AnnouncementBarProvider effect sees that the id changed. It writes dismiss = false and calls setClosed(false), so isActive becomes true and the bar is rendered.
4. Nothing resets the data-announcement-bar-initially-dismissed attribute. The CSS rule from step 2 still applies, so the rendered bar stays invisible.

On the next load, dismiss is already false, the inline script sets the attribute to false, and the bar finally shows.

Proposed fix. Make the inline script check the id too: pass the configured announcementBar.id to getAnnouncementBarInlineScript (from theme-classic/src/index.ts), and treat the bar as not dismissed when the stored docusaurus.announcement.id differs from it. I'll open a PR with this change and a test.

Reproducible demo

No response

Steps to reproduce

1. Create a fresh classic site and set in docusaurus.config.js:

   themeConfig: {
     announcementBar: {
       id: 'announcement-1',
       content: 'First announcement',
       isCloseable: true,
     },
   },

2. Run npm run build && npm run serve and open the site.
3. Close the announcement bar.
4. Change the config to id: 'announcement-2', content: 'Second announcement'. Rebuild and serve again.
5. Reload the page.

The same happens with npm run start.

Expected behavior

The second announcement is visible on the first load after step 5, because its id differs from the dismissed one.

Actual behavior

On the first load after step 5:

• The bar is not visible.
• localStorage already holds docusaurus.announcement.id = "announcement-2" and docusaurus.announcement.dismiss = "false".
• <html> still has data-announcement-bar-initially-dismissed="true".
• The .announcementBar element is in the DOM but hidden by display: none.

The bar appears only after a second reload. Users who visit once after an announcement changes never see it.

Your environment

• Docusaurus version used: 3.10.2 (the code is the same on main at c245217)
• Environment name and version (e.g. Chrome 89, Node.js 16.4): any browser; Node.js 24.18.0
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 15.7.4 (not OS-specific)

Self-service

• I'd be willing to fix this bug myself.