fix: #965 improve loading animation

app/components/home.module.scss

@@ -313,6 +313,10 @@
 .chat-message {
   display: flex;
   flex-direction: row;
+
+  &:last-child {
+    animation: slide-in ease 0.3s;
+  }
 }
 
 .chat-message-user {
@@ -325,7 +329,6 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  animation: slide-in ease 0.3s;
 
   &:hover {
     .chat-message-top-actions {

app/components/home.tsx

@@ -2,7 +2,7 @@
 
 require("../polyfill");
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, StyleHTMLAttributes } from "react";
 
 import styles from "./home.module.scss";
 
@@ -23,6 +23,7 @@ import {
   Route,
   useLocation,
 } from "react-router-dom";
+import { SideBar } from "./sidebar";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
@@ -37,10 +38,6 @@ const Settings = dynamic(async () => (await import("./settings")).Settings, {
   loading: () => <Loading noLogo />,
 });
 
-const SideBar = dynamic(async () => (await import("./sidebar")).SideBar, {
-  loading: () => <Loading noLogo />,
-});
-
 export function useSwitchTheme() {
   const config = useChatStore((state) => state.config);