CSSを非同期で反映させたいです。

前提・実現したいこと

非同期でメッセージ機能を作っており、送ったメッセージにcssを適用しているのですが、
リロードしないとcssが反映されません。

該当のソースコード

html
1<html>
2  <head>
3    <title>****</title>
4    <%= csrf_meta_tags %>
5    <%= csp_meta_tag %>
6    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
7    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
8    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
9    <link rel ="preload" href = "chat.css" >
10  </head>

html
1<div class="chat-container">
2  <div class ="chat-title">
3    <h1><%= @user.nickname %>さんにメッセージを送る</h1>
4  </div>
5  <div class="chat-row">
6    <div class="message-area">
7      <div class="col-xs-6">
8        <!-- meassage tableは変えない -->
9        <table class="message table">
10          <thead>
11            <tr>
12              <th style="text-align: left; font-size: 20px;"><%= current_user.nickname %></th>
13              <th style="text-align: right; font-size: 20px;"><%= @user.nickname %></th>
14            </tr>
15          </thead>
16          <% @chats.each do |chat| %>
17            <% if chat.user_id == current_user.id %>
18            <tbody>
19              <tr>
20                <th class="chat-message-left"><%= chat.message %></th>
21                <th class="chat-time-left"><%= time_ago_in_words(chat.created_at) %></th>
22                <th></th>
23              </tr>
24            <% else %>
25              <tr>
26                <th></th>
27                <th class="chat-message-right"><%= chat.message %></th>
28                <th class="chat-time-right"><%= time_ago_in_words(chat.created_at) %></th>
29              </tr>
30            </tbody>
31            <% end %>
32          <% end %>
33        </table>
34      </div>
35    </div>
36    <div>
37      <%= form_with model: @chat, remote: true do |f| %>
38      <div class="chat-form">
39        <%= f.text_field :message, class:"message-form" %>
40        <%= f.hidden_field :room_id %>
41        <%= f.submit "SEND", class:"btn btn-sm btn-success chat-btn" %>
42      </div>
43      <% end %>
44    </div>
45  </div>
46</div>

js
1$('.message').append("<th><%= @chat.message %></th>");
2$('.message').append("<th><%= time_ago_in_words(@chat.created_at) %></th>");
3$('input[type=text]').val("")

css
1.chat-message-left{
2  border-radius: 0%;
3  background-color: lightgreen;
4  width: 220px;
5  margin-left: 5px;
6}
7.chat-message-right{
8  border-radius: 0%;
9  background-color: lightgreen;
10  margin-right: 5px;
11}
12.chat-time-left{
13  margin-left: 5px;
14  font-size: 10px;
15  color: rgb(77, 77, 77);
16}
17.chat-time-right{
18  margin-left: 5px;
19  font-size: 10px;
20  color: rgb(77, 77, 77);
21}

試したこと

https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/
上記の記事を参考に、<link rel ="preload" href = "chat.css" >を追記したのですが、
非同期では反映させる事ができませんでした。
初歩的な質問ですいません。