I can see the hidden content while the page loads

[spimou]

I did npm install squeezebox --save, then import { SqueezeBoxModule } from 'squeezebox/dist'; and imports: [SqueezeBoxModule], in my app.module.ts.

If I try to include it as <link rel="stylesheet" href="/node_modules/squeezebox/styles.css"> in the index.html of the app I get an error, so I copied the css and paste it in the style.css of the angular app.

In the index.html of the app I have bootstrap 4 , inserted like <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

In my component's template I add

<squeezebox [multiple]="false">
    <sb-item [collapsed]="true">
        <sb-item-head>Title 2</sb-item-head>
        <sb-item-body>Lorem ipsum dolor sit amet</sb-item-body>
    </sb-item>
    <sb-item [collapsed]="true">
        <sb-item-head>Title 2</sb-item-head>
        <sb-item-body>Lorem ipsum dolor sit amet</sb-item-body>
    </sb-item>
</squeezebox>

In the same template I use the https://github.com/maxisam/ngx-clipboard module

The squeezebox works, but every time I refresh the page I can see the <sb-item-body> for like half a second. I dont know how to fix this, I tried editing the code and the css file, but nothing.

angular 6.0.3, running locally on win 10, chrome Version 67.0.3396.99 (Official Build) (64-bit)

Thanks

[webdev120]

Is this problem still persist ?