非同期通信　scss

非同期通信でチャットアプリを作っていて、メッセージに吹き出しを作りたいのですが、scssを当てると

のようにメッセージの上にきてしまいます
デベロッパーツール

リロードすると


作りたいようになります

リロードせずに吹き出しでメッセージを囲みたいのですがご教授お願いします

haml

  .message__upper-info
    %p.message__upper-info__talker
      = message.user.name
    %p.message__upper-info__date 
      = message.created_at.strftime("%Y/%m/%d %H:%M")
  - if message.content.present?
    %p.message__text 
      = message.content
  = image_tag message.image.url, class: 'lower-message__image' if message.image.present?

scss 吹き出し部分


.message__text {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #f3f6f6;
}

.message__text:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #f3f6f6;
}