[Sugestão] Problemas com componentes no blazor para playlist

Olá a todos. Caso voces tenham problemas com a barra de tempo, e os icones como o css do bootstrap, segue o codigo de uma forma de tentar fazer um pouco mais "caprichado"

componente blazor

@page "/playlist"
@inject MusicasAPI musicasAPI
@implements IDisposable

<h2>Playlist</h2>

<div class="playlist-container d-flex align-items-center mb-4 p-3 bg-dark text-bg-dark rounded">
    <img src="images/cardArtista.png" class="playlist-cover me-4" alt="">
    <div>
        <h3 class="mb-1">Minha Playlist Favorita</h3>
        <p class="text-white mb-2">Uma seleção das melhores músicas para você curtir!</p>
        <span class="badge bg-primary">Pública</span>
    </div>
</div>

@if (musicas != null)
{
    <div class="playlist-tracks bg-light rounded p-3">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th></th>
                    <th>Número</th>
                    <th>Música</th>
                    <th>Artista</th>
                    <th>Ano Lançamento</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var musica in musicas)
                {
                    var isPlaying = musica.Id == musicaTocandoID;
                    <tr class="playlist-item @(isPlaying ? "playing-row" : null)"
                    @onclick="() => AlternarPlay (musica.Id) ">
                        <td>
                            <i class="bi @(isPlaying ? "bi-stop-fill" : "bi-play-fill")"></i>
                        </td>
                        <td>@musica.Id</td>
                        <td>
                            <div>@musica.Nome</div>
                            @if (isPlaying)
                            {
                                <div class="progress-bar-container">
                                    <div class="progress-bar" style="width: @(progresso)%; transition: width 0.5s linear;"></div>
                                </div>
                            }
                        </td>
                        <td>@musica.NomeArtista</td>
                        <td>@musica.AnoLancamento</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
}
else
{
    <p>Carregando...</p>
}

@code {
    private int? musicaTocandoID;
    private ICollection<MusicaResponse>? musicas;
    private double progresso = 0; // Progresso da música em porcentagem
    private CancellationTokenSource? cancellationTokenSource; // Para controlar o cancelamento do progresso

    protected override async Task OnInitializedAsync ()
    {
        musicas = await musicasAPI.GetMusicaAsync();
    }

    //vai cuidar do controle de musicas que estariam tocando
    private async Task AlternarPlay(int musicaId)
    {
        if (musicaTocandoID == musicaId)
        {
            musicaTocandoID = null;
            cancellationTokenSource?.Cancel(); // cancela o progresso
            progresso = 0;
        }
        else
        {
            cancellationTokenSource?.Cancel();
            
            musicaTocandoID = musicaId;
            progresso = 0;
            cancellationTokenSource = new CancellationTokenSource();
            
            try
            {
                int duracao = 15000;
                int intervalo = 150;
                int passos = duracao / intervalo;
                
                for (int i = 0; i <= passos; i++)
                {
                    if (cancellationTokenSource.Token.IsCancellationRequested)
                        break;
                        
                    progresso = (i * 100.0) / passos;
                    StateHasChanged();
                    await Task.Delay(intervalo, cancellationTokenSource.Token);
                }
                
                if (musicaTocandoID == musicaId && !cancellationTokenSource.Token.IsCancellationRequested)
                {
                    musicaId++;
                    progresso = 0;
                    await AlternarPlay(musicaId);
                }
            }
            catch (TaskCanceledException)
            {
                progresso = 0;
            }
        }
    }
    
    // Implementação do IDisposable para cancelar o token quando o componente for descartado
    public void Dispose()
    {
        cancellationTokenSource?.Cancel();
        cancellationTokenSource?.Dispose();
    }
}

voce precisa importar a biblioteca do bootstrap no index
parte do head de como ele deveria estar

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" /> <!--  add esta linha dentro do head-->
</head>