SSE on-message event works in postman but not in angular Frontend

I have my Java SSE code using RX

@GET
    @Path("/stream")
    @Produces("text/event-stream")
    @Timed(absolute = true, name = "GET./stream")
    // @formatter:on
    public void getEmitter(@Context SseEventSink sseEventSink, @Context Sse sse, @QueryParam("prompt") String prompt) {
        System.out.println("prompt: " + prompt);
        executor.execute(() -> {
            try {
                for (int i = 0; i < 10; i++) {
                    sseEventSink.send(sse.newEvent("Hello World!" + i + "nn"));
                    Thread.sleep(1000);
                }
            } catch (InterruptedException e) {
                e.printStackTrace();
            } finally {
                sseEventSink.close();
            }
        });
    }

The above code fine if send the get request from POSTMAN -> localhost:9999/ai/notes/stream
i.e The events are getting printed every 1s

But when i do the same get request using EventSourcePolyfill, I do get the message but all the messages are printed after 10s. i.e i cannot see the message as they come to the client. UI code below

sseTest() {
    const authToken = this.localStorageService.get('tokenInfo')['accessToken'];
    const eventSourceInitDict = {
      headers: {
        Authorization: 'Bearer ' + authToken
      }
    };
    const es = new EventSourcePolyfill('/api/ai/notes/stream', eventSourceInitDict);
    const listener = function(event) {
      console.log(event);
    };
    es.addEventListener('open', listener);
    es.addEventListener('message', listener);
    es.addEventListener('error', listener);
  }

I get all the message printed at the end like below:enter image description here