Adding delay in observable returns partial data in Angular rxjs

In my code I need to add delay by using timer(500). But the issue is that it returns partial data. It is returning 2 fields while actual data has 17 fields. I have attached my code. please see it. Thank you

Returned value:

 ['booking_display_id', 'edit']

Expected value:

 ['booking_display_id', 'bookingstatus', 'b_contactname', 'member', 'b_emailaddress', 'b_mobilenumber', 'startdate', 'enddate', 'duration', 'bookingguest', 'guestnotes', 'vouchers', 'paypalpaymentpdt', 'totalCost', 'canPay', 'canCancel', 'edit']

 this.displayedColumns = combineLatest(this.table.columns.reduce((observables: Observable<boolean>[], col) => {
  // handle showIf property of column
  const show = col.showIf(this.injector, this.route.queryParamMap);
  observables.push(show instanceof Observable ? show : of(show));
  return observables;
}, []), timer(500)).pipe(
  map(showCols => {
    const cols = this.table.columns.filter((c, i) => showCols[i])
      .map(c => c.id);
    this.editEnabled && cols.push('edit');
    this.deleteEnabled && cols.push('delete');
    console.log('cols', cols)
    return cols;
  })
 );