@@ -0,0 +1,19 @@
+---
+"webpack-dev-middleware": patch
+---
+
+Fixed an empty overlay that covered the page and could only be dismissed by
+hand. A source reporting an empty list of problems — which is how a source
+says it has nothing — was kept as a slot, so the union of every source's
+problems was non-empty and the card mounted with nothing in it. Worse when
+another source then cleared: the overlay stayed, showing only its dismiss
+hint, on page `-1`. An empty list is now the source having nothing, and the
+overlay closes when no source has anything left.
+
+Fixed the building indicator staying on the page for good after a
+multi-compiler build. A progress payload carries no compilation name, so the
+client attributed it to whichever compilation most recently started building —
+and a payload from a still-running compilation could re-mark a sibling that
+had already finished, and would never report again, as building. Progress now
+reports on the build that is running instead of starting one, so the badge
+goes away once every compilation that started has reported back.
@@ -495,10 +495,6 @@ let customHandler;
 /** @type {((obj: HMRPayload) => void) | undefined} */
 let subscribeAllHandler;
 
-// Name of the build that most recently reported `building` — progress
-// payloads carry no name, so they are attributed to it.
-let lastBuildingName = "";
-
 /**
  * @param {HMRPayload} obj payload
  */
@@ -518,11 +514,12 @@ function processMessage(obj) {
         reporter.clearRuntimeProblems();
       }
       if (options.progress && typeof document !== "undefined") {
-        lastBuildingName = obj.name || "";
+        // Named, so the badge stays until every compilation that started has
+        // reported back — a sibling finishing is not this one finishing.
         indicator.show(
           obj.file ? `Rebuilding… (${obj.file})` : undefined,
           undefined,
-          lastBuildingName,
+          obj.name || "",
         );
       }
       sendMessage("Invalid");
@@ -542,13 +539,13 @@ function processMessage(obj) {
       break;
     }
     case "progress": {
-      // Progress payloads carry no name — attribute them to the build that
-      // most recently reported `building`.
+      // Reported rather than shown: a progress payload carries no name, so it
+      // cannot say whose build it is, and in a multi-compiler build one
+      // compilation's progress arrives while a sibling has already finished.
       if (options.progress && typeof document !== "undefined") {
-        indicator.show(
+        indicator.update(
           `Rebuilding… ${obj.percent}%${obj.message ? ` (${obj.message})` : ""}`,
           obj.percent,
-          lastBuildingName,
         );
       }
       sendMessage("Progress", obj);
 
@@ -368,6 +368,34 @@ function showBar(percent) {
  */
 export function show(text, percent, source = "") {
   state.building[source] = true;
+  render(text, percent);
+}
+
+/**
+ * Report what the running build is doing, without starting one.
+ *
+ * A progress payload carries no compilation name, so it cannot say whose
+ * build it belongs to. Letting it start one meant a payload from a
+ * still-running compilation could re-mark a sibling that had already finished
+ * — and would never report again — as building, leaving the badge on the page
+ * for good. Nothing is building means there is nothing to report about.
+ * @param {string=} text label text
+ * @param {number=} percent compilation progress (0-100)
+ */
+export function update(text, percent) {
+  if (Object.keys(state.building).length === 0) {
+    return;
+  }
+
+  render(text, percent);
+}
+
+/**
+ * Draw the badge (or the bar) as it currently is.
+ * @param {string=} text label text
+ * @param {number=} percent compilation progress (0-100)
+ */
+function render(text, percent) {
   ensureIndicator();
 
   if (state.type === "linear") {
 
@@ -364,7 +364,14 @@ function computeProblemsUnion() {
   const slots = [];
 
   for (const source of Object.keys(state.problemsBySource)) {
-    slots.push(state.problemsBySource[source]);
+    const slot = state.problemsBySource[source];
+
+    // A slot with nothing in it is not something to show. `showProblems`
+    // below no longer stores one, but a copy of this module from an older
+    // version of the package shares this state and still can.
+    if (slot && slot.lines.length > 0) {
+      slots.push(slot);
+    }
   }
 
   if (slots.length === 0) {
@@ -819,6 +826,16 @@ render = renderProblems;
  * slot and the overlay renders the union of every slot
  */
 export function showProblems(type, lines, source = "") {
+  // Nothing to report is not something to report. Kept as a slot, it made the
+  // union non-empty, which put an empty card on the page for the reader to
+  // dismiss by hand — and, once another source cleared, left the page covered
+  // by an overlay with no problems in it at all.
+  if (lines.length === 0) {
+    clear(source);
+
+    return;
+  }
+
   state.problemsBySource[source] = { type, lines: [...lines] };
 
   const union =
 
@@ -92,6 +92,36 @@ describe("building indicator (browser)", () => {
     expect(texts.some((text) => text.includes("%"))).toBe(true);
   });
 
+  it("goes away when every compilation of a multi-compiler build finishes", async () => {
+    // Two compilations publishing progress into one stream, and a progress
+    // payload carries no name to say whose it is. The guarantee is the same
+    // as for one: once nothing is building, nothing is on the page.
+    hotApp = await createHotApp({
+      hot: { progress: true },
+      apps: [
+        { name: "a", code: acceptedApp("a1") },
+        { name: "b", code: acceptedApp("b1") },
+      ],
+    });
+    ({ page, browser } = await runBrowser());
+
+    await page.goto(`${hotApp.url}page/a`);
+    await waitForAppText(page, "a1");
+    await installBadgeSampler(page);
+
+    hotApp.edit("a", acceptedApp("a2"));
+    await waitForAppText(page, "a2");
+    hotApp.edit("b", acceptedApp("b2"));
+
+    expect(await page.evaluate(() => globalThis.__badgeSeen)).toBe(true);
+
+    await page.waitForFunction(
+      (id) => document.getElementById(id) === null,
+      { timeout: 60000 },
+      INDICATOR_ID,
+    );
+  });
+
   it("never appears when progress=false", async () => {
     hotApp = await createHotApp({
       query: "?progress=false",
@@ -252,6 +282,63 @@ describe("indicator shared state across bundled copies (browser)", () => {
     ({ browser, app: hotApp } = await closeE2e(browser, hotApp));
   });
 
+  // A progress payload carries no compilation name, so the client cannot say
+  // whose build it belongs to. It must therefore report on the build that is
+  // running rather than start one, or in a multi-compiler build a payload
+  // from one compilation re-marks a sibling that already finished — and will
+  // never report again — as building, and the badge never leaves the page.
+  it("does not let progress restart a build that already finished", async () => {
+    await start();
+    await page.goto(hotApp.url);
+
+    const present = () =>
+      page.evaluate((id) => Boolean(document.getElementById(id)), INDICATOR_ID);
+
+    await page.evaluate(() => {
+      globalThis.indicatorA.show("Rebuilding…", undefined, "a");
+      globalThis.indicatorB.show("Rebuilding…", undefined, "b");
+    });
+
+    expect(await present()).toBe(true);
+
+    // `b` finishes; `a` is still going, so the badge stays.
+    await page.evaluate(() => {
+      globalThis.indicatorB.hide("b");
+    });
+
+    expect(await present()).toBe(true);
+
+    // `a`'s progress arrives. It says nothing about who it belongs to.
+    await page.evaluate(() => {
+      globalThis.indicatorA.update("Rebuilding… 50%", 50);
+    });
+
+    // ... and now `a` finishes too. Nothing is building any more.
+    await page.evaluate(() => {
+      globalThis.indicatorA.hide("a");
+    });
+
+    expect(await present()).toBe(false);
+  });
+
+  it("reports nothing when no build is running", async () => {
+    await start();
+    await page.goto(hotApp.url);
+
+    await page.evaluate(() => {
+      globalThis.indicatorA.update("Rebuilding… 50%", 50);
+    });
+
+    // A payload with no build behind it has nothing to report about, and
+    // putting a badge up for it would leave one nothing takes down.
+    expect(
+      await page.evaluate(
+        (id) => Boolean(document.getElementById(id)),
+        INDICATOR_ID,
+      ),
+    ).toBe(false);
+  });
+
   it("stops a sweep when motion is declined mid-build, and recovers", async () => {
     await start();
     await page.goto(hotApp.url);
 
@@ -1505,6 +1505,67 @@ describe("overlay shared state across bundled copies (browser)", () => {
     );
   });
 
+  // An empty list is what a source says when it has nothing to report. Kept
+  // as a slot it made the union non-empty, so the overlay mounted with
+  // nothing in it and stayed there for the reader to dismiss by hand.
+  it("shows nothing for a source that reports no problems", async () => {
+    await start();
+    await page.goto(hotApp.url);
+
+    await page.evaluate(() => {
+      globalThis.overlayA.showProblems("errors", [], "a");
+    });
+
+    await new Promise((resolve) => {
+      setTimeout(resolve, 500);
+    });
+
+    expect(await page.$(`#${OVERLAY_ID}`)).toBeNull();
+  });
+
+  it("takes an empty list as the source having nothing left", async () => {
+    await start();
+    await page.goto(hotApp.url);
+
+    await page.evaluate(() => {
+      globalThis.overlayA.showProblems("errors", ["boom"], "a");
+    });
+    await overlayFrame();
+
+    await page.evaluate(() => {
+      globalThis.overlayA.showProblems("errors", [], "a");
+    });
+    await waitForNoOverlay(page);
+
+    expect(await page.$(`#${OVERLAY_ID}`)).toBeNull();
+  });
+
+  it("leaves no empty overlay behind when the last real source clears", async () => {
+    await start();
+    await page.goto(hotApp.url);
+
+    const state = await page.evaluate(() => {
+      globalThis.overlayA.showProblems("errors", ["real problem"], "a");
+      globalThis.overlayB.showProblems("warnings", [], "b");
+      globalThis.overlayA.clear("a");
+
+      const shared = globalThis.__webpack_dev_middleware_hot_overlay_state__;
+
+      return {
+        pageIndex: shared.pageIndex,
+        currentProblems: shared.currentProblems,
+        attached: Boolean(shared.frame && shared.frame.parentNode),
+      };
+    });
+
+    // Before, `b`'s empty slot kept the union alive: the card stayed on the
+    // page showing only its dismiss hint, on page `-1`.
+    expect(state.attached).toBe(false);
+    expect(state.currentProblems).toBeNull();
+    expect(state.pageIndex).toBe(0);
+    expect(await page.$(`#${OVERLAY_ID}`)).toBeNull();
+  });
+
   it("dismisses on Escape pressed inside the overlay frame", async () => {
     await start();
     await page.goto(hotApp.url);
 
@@ -11,6 +11,21 @@ export function show(
   percent?: number | undefined,
   source?: string | undefined,
 ): void;
+/**
+ * Report what the running build is doing, without starting one.
+ *
+ * A progress payload carries no compilation name, so it cannot say whose
+ * build it belongs to. Letting it start one meant a payload from a
+ * still-running compilation could re-mark a sibling that had already finished
+ * — and would never report again — as building, leaving the badge on the page
+ * for good. Nothing is building means there is nothing to report about.
+ * @param {string=} text label text
+ * @param {number=} percent compilation progress (0-100)
+ */
+export function update(
+  text?: string | undefined,
+  percent?: number | undefined,
+): void;
 /**
  * Mark one source's build as finished, or remove the indicator entirely.
  * @param {string=} source when given, only that source is dropped and the