diff --git a/src/BootstrapBlazor.Shared/Locales/en.json b/src/BootstrapBlazor.Shared/Locales/en.json
index c31e66041f85a845c24ae7c30cc098699fe1e902..76ce84fef073705c09d215a802f809b838b2e732 100644
--- a/src/BootstrapBlazor.Shared/Locales/en.json
+++ b/src/BootstrapBlazor.Shared/Locales/en.json
@@ -297,16 +297,18 @@
     "Li2": "Lists/cards with more graphic information content",
     "Li3": "Only used when loading data for the first time",
     "Li4": "Can be completely replaced by Spin, but can provide better visual effects and user experience than Spin in available scenarios",
-    "Block1Title": "Picture frame screen",
+    "Block1Title": "Picture frame",
     "Block1Intro": "Suitable for display when loading avatars, pictures, etc.",
     "P1": "It can be set to a circle display by setting the <code>Circle</code> property",
-    "Block2Title": "Paragraph skeleton screen",
+    "Block2Title": "Paragraph skeleton",
     "Block2Intro": "Applicable to display when loading large paragraphs of text and other types",
     "P2": "The default paragraph skeleton screen only displays three lines. If you need multiple lines to occupy space, please place multiple <code>SkeletonParagraph</code>.",
-    "Block3Title": "Form skeleton screen",
+    "Block3Title": "Form skeleton",
     "Block3Intro": "Suitable for display when the edit form is loaded",
-    "Block4Title": "Table skeleton screen",
-    "Block4Intro": "Applicable to display when the edit table is loaded"
+    "Block4Title": "Table skeleton",
+    "Block4Intro": "Applicable to display when the edit table is loaded",
+    "BlockTreeTitle": "Tree skeleton",
+    "BlockTreeIntro": "Display when tree component is loaded"
   },
   "BootstrapBlazor.Shared.Pages.Coms": {
     "Search": "Search for the desired component",
diff --git a/src/BootstrapBlazor.Shared/Locales/zh.json b/src/BootstrapBlazor.Shared/Locales/zh.json
index ed633625469d3673d9034f240c9540e4f0ec076d..e5eaf70d3cf2543aeb527e791016120fb75bab75 100644
--- a/src/BootstrapBlazor.Shared/Locales/zh.json
+++ b/src/BootstrapBlazor.Shared/Locales/zh.json
@@ -306,7 +306,9 @@
     "Block3Title": "表单骨架屏",
     "Block3Intro": "适用于编辑表单加载时显示",
     "Block4Title": "表格骨架屏",
-    "Block4Intro": "适用于编辑表格加载时显示"
+    "Block4Intro": "适用于编辑表格加载时显示",
+    "BlockTreeTitle": "树骨架屏",
+    "BlockTreeIntro": "适用于树组件加载时显示"
   },
   "BootstrapBlazor.Shared.Pages.Coms": {
     "Search": "搜索想要的组件",
diff --git a/src/BootstrapBlazor.Shared/Samples/Trees.razor b/src/BootstrapBlazor.Shared/Samples/Trees.razor
index 9d534ba888ec136799159af58ff18bf52b191e1d..886044db846da4e4de751fa2219eb4ac97cb6f47 100644
--- a/src/BootstrapBlazor.Shared/Samples/Trees.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Trees.razor
@@ -89,6 +89,11 @@
     <BlockLogger @ref="TraceCheckedItems" class="mt-3" />
 </DemoBlock>
 
+<DemoBlock Title="加载骨架屏" Introduction="通过设置 <code>ShowSkeleton</code> 使异步加载数据时组件显示骨架屏" Name="ShowSkeleton">
+    <Button Text="异步加载" IsAsync="true" Icon="fa fa-fa" OnClick="OnLoadAsyncItems" />
+    <Tree Items="@AsyncItems" ShowSkeleton="true" class="mt-3" />
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />
 
 <AttributeTable Items="@GetTreeItemAttributes()" Title="TreeItem 属性" />
diff --git a/src/BootstrapBlazor.Shared/Samples/Trees.razor.cs b/src/BootstrapBlazor.Shared/Samples/Trees.razor.cs
index 63f24b3ae7a3e3ef7d52cbfb68af867d68c81c36..d7827e1c964191599e74f4a5edd10d5db03de744 100644
--- a/src/BootstrapBlazor.Shared/Samples/Trees.razor.cs
+++ b/src/BootstrapBlazor.Shared/Samples/Trees.razor.cs
@@ -36,6 +36,24 @@ public sealed partial class Trees
 
     private List<TreeItem> CheckedItems { get; set; } = GetCheckedItems();
 
+    private List<TreeItem>? AsyncItems { get; set; }
+
+    /// <summary>
+    /// OnInitializedAsync 方法
+    /// </summary>
+    /// <returns></returns>
+    protected override async Task OnInitializedAsync()
+    {
+        await OnLoadAsyncItems();
+    }
+
+    private async Task OnLoadAsyncItems()
+    {
+        AsyncItems = null;
+        await Task.Delay(2000);
+        AsyncItems = TreeDataFoo.GetTreeItems();
+    }
+
     private static List<TreeItem> GetCheckedItems()
     {
         var ret = TreeDataFoo.GetTreeItems();
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
index f20ff0f2342ac0c55a1c090bac91d0014a0d059d..7986fd8572de11c3ad1bcdc259820358821346c1 100644
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>6.4.3-beta02</Version>
+    <Version>6.4.3-beta03</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">
diff --git a/src/BootstrapBlazor/Components/Tree/Tree.razor b/src/BootstrapBlazor/Components/Tree/Tree.razor
index 31bb14f31c894adbc56607ce4e4eaa5d0ba3dfae..a872654c5fac87526a62b13bce73f7c034279ee2 100644
--- a/src/BootstrapBlazor/Components/Tree/Tree.razor
+++ b/src/BootstrapBlazor/Components/Tree/Tree.razor
@@ -5,18 +5,18 @@
 {
     if (ShowSkeleton)
     {
-        <SkeletonTree></SkeletonTree>
+        <SkeletonTree AdditionalAttributes="AdditionalAttributes"></SkeletonTree>
     }
     else
     {
-        <div class="table-loading">
+        <div class="@LoadingClassString">
             <Spinner Color="Color.Primary" />
         </div>
     }
 }
 else
 {
-    <div @attributes="@AdditionalAttributes" tabindex="0" role="tree" class="@ClassString" @ref="@TreeElement">
+    <div tabindex="0" role="tree" class="@ClassString" @ref="@TreeElement">
         <ul class="tree-root" role="tree">
             @foreach (var item in Items)
             {
diff --git a/src/BootstrapBlazor/Components/Tree/Tree.razor.cs b/src/BootstrapBlazor/Components/Tree/Tree.razor.cs
index 9e3d797aaf558d311a044b6f322b1c30e438e029..820a31b8e6cd5769c6b3ef65283f2fbb02e2bfc8 100644
--- a/src/BootstrapBlazor/Components/Tree/Tree.razor.cs
+++ b/src/BootstrapBlazor/Components/Tree/Tree.razor.cs
@@ -26,6 +26,13 @@ public partial class Tree
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
+    /// <summary>
+    /// 获得 Loading 样式集合
+    /// </summary>
+    private string? LoadingClassString => CssBuilder.Default("table-loading")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
     /// <summary>
     /// 获得/设置 TreeItem 图标
     /// </summary>
diff --git a/test/UnitTest/Components/TreeTest.cs b/test/UnitTest/Components/TreeTest.cs
index 853a88dc27f4df69532c03fb0ec1da114493eaac..7a4ae723fe33420329d98d636e134f353569783a 100644
--- a/test/UnitTest/Components/TreeTest.cs
+++ b/test/UnitTest/Components/TreeTest.cs
@@ -17,7 +17,7 @@ public class TreeTest : BootstrapBlazorTestBase
         cut.DoesNotContain("li");
 
         cut.SetParametersAndRender(pb => pb.Add(a => a.ShowSkeleton, true));
-        cut.Contains("Loading");
+        cut.Contains("skeleton tree");
 
         // 设置 Items
         cut.SetParametersAndRender(pb =>