style: enhance loading state UI with improved layout and text visibility
This commit is contained in:
@@ -40,13 +40,17 @@
|
|||||||
}
|
}
|
||||||
}}>
|
}}>
|
||||||
{#if !$loadedStore}
|
{#if !$loadedStore}
|
||||||
<div class="w-full h-full flex justify-center items-center text-textcolor text-xl bg-gray-900">
|
<div class="w-full h-full flex justify-center items-center text-textcolor text-xl bg-gray-900 flex-col">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-textcolor" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-textcolor" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
<span>Loading...</span>
|
<span>Loading...</span>
|
||||||
<span>{LoadingStatusState.text}</span>
|
</div>
|
||||||
|
|
||||||
|
<span class="text-sm mt-2 text-textcolor2">{LoadingStatusState.text}</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{:else if $CustomGUISettingMenuStore}
|
{:else if $CustomGUISettingMenuStore}
|
||||||
<CustomGUISettingMenu />
|
<CustomGUISettingMenu />
|
||||||
|
|||||||
Reference in New Issue
Block a user