DTOutput function messes up progressBar view in shiny app

Question

I believe my shinyWidgets::progressBar view is being messed up by the DT::DTOutput function. Note that the shinyWidgets::progressBar only appears at the end of the process, instead of appearing during the process. A reproducible example follows.

library(shiny)
library(DT)
library(shinyWidgets)

ui <- fluidPage(
  column(
       width = 12,
       fileInput("file1",
                  h4("choose a file!"),
                  accept = ".txt"),
        actionButton(inputId = "startf",
        label = "Start simulation"),
        uiOutput('res')
  )
)

server <- function(input, output, session) {
  
  datasetinput <- reactive({
                           req(input$file1)
                           da <- read.table(input$file1$datapath,h=T,sep=';')
                           da
                           })
  
  source("server_calculus.R",local = TRUE,encoding='UTF-8')$value
  
  output$raww <- DT::renderDT(
                          datasetinput()
                          )
  
  output$res <- renderUI({
         
         if(is.null(input$file1) & input$startf==FALSE){
             HTML("<p style='font-size:30px;'>Waitingggg...</p>")
            }else if(!is.null(input$file1) & input$startf==FALSE){
           DTOutput('raww')
         }else{
         progressBar(
                       id = "pb2",
                       value = 0,
                       total = 100,
                       title = "",
                       display_pct = TRUE
                     )
                     }       
  })
}

### server_calculus.R file
observeEvent(input$startf, {
    for (i in 1:100) {
      updateProgressBar(
        session = session,
        id = "pb2",
        value = i, total = 100,
        title = paste("Process", trunc(i/10))
      )
      Sys.sleep(0.3)
    }
  })

The server_calculus.R file was created to try to reproduce as much of my reality as possible.

Answer 1

Try this:

function toAutocomplete(dt, keyvar){
  let rli = [];
  for (let i = 0; i < dt.length; i++) rli.push(dt[i][keyvar]);
  return rli;
}

function inArrayAutocompleteSelected(key, array_autocomplete, array_master){
  let x = array_master[$.inArray(key, array_autocomplete)];
  return x;
}

$('#id_ticker').autocomplete({ source: [], minLength: 1 });  
// $('#id_ticker').autocomplete("disable");


let url = 'https://raw.githubusercontent.com/rreichel3/US-Stock-Symbols/main/nyse/nyse_full_tickers.json';
let r = _ajax('GET', url, ''); // your ajax script
console.log(r);

let liAuto = toAutocomplete(r, 'name');
console.log(liAuto);
$('#id_ticker').autocomplete("option", "source", liAuto );

// $('#id_ticker').autocomplete("enable");
$("#id_ticker").autocomplete({
  select: function( event, ui ) {
    console.log(ui, ui.item);        
    getData = inArrayAutocompleteSelected(ui.item.value, liAuto, r);
    console.log(getData);
  }
});