Rename salesbook

salesbook.Shared/Components/Layout/Spinner/SpinnerLayout.razor

@@ -0,0 +1,8 @@
+<div class="spinner-container @(FullScreen ? "" : "not-fullScreen")">
+    <span class="loader"></span>
+</div>
+
+@code
+{
+    [Parameter] public bool FullScreen { get; set; } = true;
+}

salesbook.Shared/Components/Layout/Spinner/SpinnerLayout.razor.css

@@ -0,0 +1,43 @@
+.spinner-container {
+    display: flex;
+    justify-content: center;
+    height: calc(100vh - 10.1rem);
+    align-items: center;
+    color: var(--mud-palette-primary);
+}
+
+.not-fullScreen {
+    height: auto !important;
+    padding: 2rem 0 !important;
+}
+
+.loader {
+    width: 50px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    border: 8px solid #0000;
+    border-right-color: var(--mud-palette-secondary);
+    position: relative;
+    animation: l24 1s infinite linear;
+}
+
+.loader:before,
+.loader:after {
+    content: "";
+    position: absolute;
+    inset: -8px;
+    border-radius: 50%;
+    border: inherit;
+    animation: inherit;
+    animation-duration: 2s;
+}
+
+.loader:after {
+    animation-duration: 4s;
+}
+
+@keyframes l24 {
+    100% {
+        transform: rotate(1turn)
+    }
+}

salesbook.Shared/Components/Layout/Spinner/SyncSpinner.razor

@@ -0,0 +1,20 @@
+@if (Elements is not null)
+{
+    <div class="container-loader">
+        <span>Download risorse in corso</span>
+        <div>
+            @foreach (var element in Elements)
+            {
+                <div class="progress-content">
+                    <span>@element.Key</span>
+                    <MudProgressLinear Indeterminate="@(!element.Value)" Value="100" Rounded="true" Color="@(element.Value ? Color.Tertiary : Color.Secondary)" Size="Size.Large" />
+                </div>
+            }
+        </div>
+    </div>
+}
+
+@code
+{
+    [Parameter] public Dictionary<string, bool>? Elements { get; set; }
+}

salesbook.Shared/Components/Layout/Spinner/SyncSpinner.razor.css

@@ -0,0 +1,27 @@
+.container-loader {
+    display: flex;
+    height: 95vh;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 1rem;
+    align-items: center;
+    gap: 5vh;
+}
+
+.container-loader > div {
+    width: 100%;
+}
+
+.container-loader > span {
+    font-weight: 900;
+    font-size: large;
+    color: var(--mud-palette-primary);
+}
+
+.progress-content > span {
+    font-weight: 700;
+}
+
+.progress-content:nth-last-child(2) {
+    margin: 10px 0;
+}