Frontend: Prettier loading icons

ext_federation/src/client/federation_client.rs

@@ -1,14 +1,15 @@
 use async_stream::stream;
-use futures_util::{select, stream::StreamExt, FutureExt, Stream, TryStreamExt};
+use futures_util::{FutureExt, select, Stream, stream::StreamExt, TryStreamExt};
 use headers::UserAgent;
 use hyper::body::Bytes;
-use magnetar_core::web_model::ContentType;
+use reqwest::{Client, redirect::Policy, RequestBuilder};
-use reqwest::{redirect::Policy, Client, RequestBuilder};
 use serde_json::Value;
 use thiserror::Error;
 use tokio::pin;
 use url::Url;
 
+use magnetar_core::web_model::ContentType;
+
 #[derive(Debug, Clone)]
 pub struct FederationClient {
     pub client: Client,
@@ -120,6 +121,8 @@ impl FederationRequestBuilder<'_> {
         self,
     ) -> Result<impl Stream<Item=Result<Bytes, FederationClientError>>, FederationClientError>
     {
+        eprintln!("{:?}", self.builder);
+
         let mut body = self
             .builder
             .send()

fe_calckey/frontend/client/src/components/MagNoteResolvingProxy.vue

@@ -7,8 +7,9 @@
         :pinned="pinned"
     >
     </XNote>
-    <div v-else>
+    <div class="spinner-container" v-else>
-        <i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
+        <MagSpinner />
+        Fetching
     </div>
 </template>
 
@@ -39,6 +40,17 @@ watch(
             noteData.value = n;
         });
     },
-    { immediate: true },
+    { immediate: true }
 );
 </script>
+
+<style scoped lang="scss">
+.spinner-container {
+    margin: 12px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2em;
+    gap: 0.4em;
+}
+</style>

fe_calckey/frontend/client/src/components/MagNotificationGroup.vue

@@ -69,11 +69,13 @@
                 <MagAvatar
                     v-if="notif.type === 'Renote'"
                     class="icon"
+                    :class="{ 'is-read': notif.is_read }"
                     :user="notif.note.user"
                 />
                 <MagAvatar
                     v-else-if="notif.type === 'Reaction'"
                     class="icon"
+                    :class="{ 'is-read': notif.is_read }"
                     :user="notif.user"
                 />
                 <div class="sub-icon" :class="notif.type">
@@ -264,6 +266,11 @@ const hookTooltip = (
                 width: 100%;
                 height: 100%;
                 border-radius: 6px;
+
+                &:not(.is-read) {
+                    outline: 1px solid var(--accentDarken);
+                    outline-offset: 2px;
+                }
             }
 
             > .sub-icon {
@@ -314,7 +321,7 @@ const hookTooltip = (
                 flex-wrap: wrap;
                 align-items: baseline;
                 margin-inline-end: 10px;
-                gap: 0.2em;
+                gap: 0.4em;
 
                 > .name {
                     text-overflow: ellipsis;
@@ -322,10 +329,15 @@ const hookTooltip = (
                     overflow: hidden;
                     min-width: 0;
                     flex: 0 1 auto;
-                }
+                    max-width: 150px;
+                    border: 1px solid var(--accentedBg);
+                    border-radius: 20px;
+                    padding-inline: 10px;
 
-                > .name:not(:last-child)::after {
+                    &:hover {
-                    content: ",";
+                        background-color: var(--accentedBg);
+                        border-color: var(--accent);
+                    }
                 }
             }
 

fe_calckey/frontend/client/src/components/MagPoll.vue

@@ -47,10 +47,7 @@
                 <a v-if="!pollRefreshing" @click.stop="refresh">{{
                     i18n.ts.reload
                 }}</a>
-                <i
+                <MagSpinner v-else />
-                    v-else
-                    class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
-                ></i>
             </span>
             <span v-if="isVoted"> · {{ i18n.ts._poll.voted }}</span>
             <span v-else-if="closed"> · {{ i18n.ts._poll.closed }}</span>
@@ -77,14 +74,14 @@ const pollRefreshing = ref(false);
 const remaining = ref(-1);
 
 const total = computed(() =>
-    sum(props.note.poll.options.map((x) => x.votes_count)),
+    sum(props.note.poll.options.map((x) => x.votes_count))
 );
 const closed = computed(() => remaining.value === 0);
 const isLocal = computed(() => !props.note.uri);
 const isVoted = computed(
     () =>
         !props.note.poll.multiple_choice &&
-        props.note.poll.options.some((c) => c.voted ?? false),
+        props.note.poll.options.some((c) => c.voted ?? false)
 );
 const timer = computed(() =>
     i18n.t(
@@ -100,8 +97,8 @@ const timer = computed(() =>
             m: Math.floor(remaining.value / 60) % 60,
             h: Math.floor(remaining.value / 3600) % 24,
             d: Math.floor(remaining.value / 86400),
-        },
+        }
-    ),
+    )
 );
 
 const showResult = ref(props.readOnly || isVoted.value);
@@ -112,8 +109,8 @@ if (props.note.poll.expires_at) {
         remaining.value = Math.floor(
             Math.max(
                 new Date(props.note.poll.expires_at!).getTime() - Date.now(),
-                0,
+                0
-            ) / 1000,
+            ) / 1000
         );
         if (remaining.value === 0) {
             showResult.value = true;
@@ -137,7 +134,7 @@ async function refresh() {
                 os.magApi(
                     endpoints.GetNoteById,
                     { attachments: true },
-                    { id: obj.object.id },
+                    { id: obj.object.id }
                 ).then((n) => {
                     props.note.poll = { ...toRaw(props.note.poll), ...n.poll };
                 });

fe_calckey/frontend/client/src/components/MkFollowApproveButton.vue

@@ -1,6 +1,6 @@
 <template>
     <template v-if="waitIncoming">
-        <i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
+        <MagSpinner />
     </template>
     <template v-else>
         <button

fe_calckey/frontend/client/src/components/MkFollowButton.vue

@@ -44,7 +44,7 @@
             >
                 <!-- つまりリモートフォローの場合。 -->
                 <span>{{ (state = i18n.ts.processing) }}</span
-                ><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
+                ><MagSpinner />
             </template>
             <template v-else-if="isFollowing">
                 <span>{{ (state = i18n.ts.unfollow) }}</span
@@ -71,7 +71,7 @@
         </template>
         <template v-else>
             <span>{{ (state = i18n.ts.processing) }}</span
-            ><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
+            ><MagSpinner />
         </template>
     </button>
 </template>

fe_calckey/frontend/client/src/components/MkMediaBanner.vue

@@ -52,7 +52,6 @@ const props = withDefaults(
     {}
 );
 
-
 let hide = ref(true);
 </script>
 
@@ -101,6 +100,7 @@ let hide = ref(true);
         & fieldset.audio-player-frame {
             border-color: var(--accentedBg);
             border-radius: 10px;
+            border-style: solid;
 
             & legend {
                 padding-inline: 5px;

fe_calckey/frontend/client/src/components/MkSignup.vue

@@ -47,15 +47,17 @@
                         v-tooltip:dialog="i18n.ts.usernameInfo"
                         class="_button _help"
                     >
-                        <i class="ph-question ph-bold"></i></div
+                        <i class="ph-question ph-bold"></i>
-                ></template>
+                    </div>
+                </template>
                 <template #prefix>@</template>
                 <template #suffix>@{{ host }}</template>
                 <template #caption>
-                    <span v-if="usernameState === 'wait'" style="color: #6e6a86"
+                    <span
-                        ><i
+                        v-if="usernameState === 'wait'"
-                            class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
+                        style="color: #6e6a86"
-                        ></i>
+                    >
+                        <MagSpinner />
                         {{ i18n.ts.checking }}</span
                     >
                     <span
@@ -113,16 +115,15 @@
                         v-tooltip:dialog="i18n.ts._signup.emailAddressInfo"
                         class="_button _help"
                     >
-                        <i class="ph-question ph-bold"></i></div
+                        <i class="ph-question ph-bold"></i>
-                ></template>
+                    </div>
+                </template>
                 <template #prefix
                     ><i class="ph-envelope-simple-open ph-bold ph-lg"></i
                 ></template>
                 <template #caption>
-                    <span v-if="emailState === 'wait'" style="color: #6e6a86"
+                    <span v-if="emailState === 'wait'" style="color: #6e6a86">
-                        ><i
+                        <MagSpinner />
-                            class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
-                        ></i>
                         {{ i18n.ts.checking }}</span
                     >
                     <span
@@ -219,8 +220,8 @@
                 @update:modelValue="onChangePasswordRetype"
             >
                 <template #label
-                    >{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template
+                    >{{ i18n.ts.password }} ({{ i18n.ts.retype }})
-                >
+                </template>
                 <template #prefix
                     ><i class="ph-lock ph-bold ph-lg"></i
                 ></template>
@@ -277,16 +278,14 @@
                 :disabled="shouldDisableSubmitting"
                 gradate
                 data-cy-signup-submit
-                >{{ i18n.ts.start }}</MkButton
+                >{{ i18n.ts.start }}
-            >
+            </MkButton>
         </div>
     </form>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from "vue";
+import { computed, ref } from "vue";
-
-import {} from "vue";
 import getPasswordStrength from "syuilo-password-strength";
 import { toUnicode } from "punycode/";
 import MkButton from "./MkButton.vue";
@@ -305,7 +304,7 @@ const props = withDefaults(
     }>(),
     {
         autoSet: false,
-    },
+    }
 );
 
 const emit = defineEmits<{

fe_calckey/frontend/client/src/components/global/MagSpinner.vue

@@ -0,0 +1,80 @@
+<template>
+    <i class="simple ph-hourglass ph-bold ph-lg" :aria-label="i18n.ts.busy"></i>
+    <svg
+        class="animated mag-spinner"
+        width="32"
+        height="32"
+        version="1.1"
+        viewBox="0 0 67.733 67.733"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <g class="mag-ring" transform="matrix(.82287 0 0 .82287 5.9984 5.9989)">
+            <path
+                d="m33.959 0.8413c-8.3737-0.008823-16.592 3.1643-22.849 9.1188-8.8995 8.4685-12.376 21.177-9.023 32.996l5.9686-1.681c-2.7249-9.6065 0.095231-19.927 7.329-26.811 7.2337-6.8834 17.845-8.9517 26.103-6.264l1.9737-5.9045c-2.9094-0.98361-4.8438-1.2553-7.8257-1.41-0.55911-0.028992-1.1178-0.044097-1.676-0.04468zm31.826 24.715-6.0201 1.553c2.4674 9.2417-0.15852 19.094-6.8993 25.88-6.7409 6.7861-16.177 9.1968-25.564 6.8428l-1.6444 5.9555c11.39 2.9597 23.3-0.07129 31.594-8.4205 8.2936-8.3492 11.569-20.441 8.5336-31.811z"
+                fill="currentColor"
+            />
+        </g>
+        <g
+            class="mag-butterflies"
+            transform="matrix(1.2958 .098299 -.098299 1.2958 .41715 -18.811)"
+        >
+            <path
+                d="m19.244 39.965c-0.62132 0.75445-1.2862 1.4845-1.8805 2.2541-0.45826 1.4275-0.95911 2.8484-1.3908 4.28 0.01197 0.7973 0.02382 1.5946 0.03574 2.3919-0.82611-0.0559-1.656-0.15529-2.4798-0.18435-1.4482 0.38557-2.9176 0.72632-4.3525 1.1398-0.76206 0.56257-1.5241 1.1251-2.2862 1.6877 0.00746 0.57752 0.014929 1.155 0.022392 1.7326 0.85814 0.49688 1.6647 1.0953 2.6101 1.4204 0.76646 0.32006 1.5329 0.64012 2.2994 0.96018 0.53911-0.39567 1.0782-0.79134 1.6173-1.187 0.01331 0.4126 0.02652 0.82522 0.03983 1.2378 0.55847 0.37816 1.0935 0.81873 1.6666 1.1579 0.94848 0.09538 1.897 0.19074 2.8454 0.28611 0.79636-0.46986 1.5927-0.93971 2.3891-1.4096-0.14459-0.67269-0.24382-1.3636-0.41647-2.025-0.40398-0.62711-0.79926-1.2606-1.2086-1.8838 0.62691 0.4569 1.2427 0.94576 1.8866 1.3706 0.63581 0.16906 1.2716 0.33814 1.9074 0.5072 0.52106-0.76381 1.0421-1.5276 1.5632-2.2914-0.05014-0.9802-0.03649-1.9797-0.12641-2.9479-0.33964-0.54964-0.67928-1.0993-1.0189-1.6489-0.41083-0.04035-0.82165-0.08069-1.2325-0.12099 0.43013-0.51202 0.86026-1.024 1.2904-1.5361-0.39788-1.1174-0.74239-2.2576-1.1736-3.3607-0.29327-0.56483-0.58654-1.1297-0.8798-1.6945-0.5758-0.0454-1.1516-0.09072-1.7274-0.13608z"
+                fill="currentColor"
+            />
+        </g>
+        <g
+            class="mag-butterflies"
+            transform="matrix(-1.2957 -.098293 .098293 -1.2957 66.781 86.854)"
+        >
+            <path
+                d="m19.244 39.965c-0.62132 0.75445-1.2862 1.4845-1.8805 2.2541-0.45826 1.4275-0.95911 2.8484-1.3908 4.28 0.01197 0.7973 0.02382 1.5946 0.03574 2.3919-0.82611-0.0559-1.656-0.15529-2.4798-0.18435-1.4482 0.38557-2.9176 0.72632-4.3525 1.1398-0.76206 0.56257-1.5241 1.1251-2.2862 1.6877 0.00746 0.57752 0.014929 1.155 0.022392 1.7326 0.85814 0.49688 1.6647 1.0953 2.6101 1.4204 0.76646 0.32006 1.5329 0.64012 2.2994 0.96018 0.53911-0.39567 1.0782-0.79134 1.6173-1.187 0.01331 0.4126 0.02652 0.82522 0.03983 1.2378 0.55847 0.37816 1.0935 0.81873 1.6666 1.1579 0.94848 0.09538 1.897 0.19074 2.8454 0.28611 0.79636-0.46986 1.5927-0.93971 2.3891-1.4096-0.14459-0.67269-0.24382-1.3636-0.41647-2.025-0.40398-0.62711-0.79926-1.2606-1.2086-1.8838 0.62691 0.4569 1.2427 0.94576 1.8866 1.3706 0.63581 0.16906 1.2716 0.33814 1.9074 0.5072 0.52106-0.76381 1.0421-1.5276 1.5632-2.2914-0.05014-0.9802-0.03649-1.9797-0.12641-2.9479-0.33964-0.54964-0.67928-1.0993-1.0189-1.6489-0.41083-0.04035-0.82165-0.08069-1.2325-0.12099 0.43013-0.51202 0.86026-1.024 1.2904-1.5361-0.39788-1.1174-0.74239-2.2576-1.1736-3.3607-0.29327-0.56483-0.58654-1.1297-0.8798-1.6945-0.5758-0.0454-1.1516-0.09072-1.7274-0.13608z"
+                fill="currentColor"
+            />
+        </g>
+    </svg>
+</template>
+
+<script setup lang="ts">
+import { i18n } from "@/i18n";
+</script>
+
+<style scoped lang="scss">
+.simple {
+    display: none;
+}
+
+.mag-spinner.animated {
+    display: inline-block;
+    height: 100%;
+    aspect-ratio: 1 / 1;
+    width: auto;
+
+    transform-origin: center;
+    animation-name: mag-ring-rotate;
+    animation-timing-function: linear;
+    animation-direction: normal;
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+}
+
+@keyframes mag-ring-rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion) {
+    .simple {
+        display: initial;
+    }
+
+    .animated {
+        display: none;
+    }
+}
+</style>

fe_calckey/frontend/client/src/components/global/MkLoading.vue

@@ -1,37 +1,50 @@
 <template>
-    <div
+    <svg
+        aria-hidden="true"
         :class="[
-            $style.root,
+            $style['mag-spinner-loading'],
             {
                 [$style.inline]: inline,
                 [$style.colored]: colored,
                 [$style.mini]: mini,
             },
         ]"
-    >
+        width="32"
-        <div :class="$style.container" aria-hidden="true">
+        height="32"
-            <svg
+        version="1.1"
-                :class="[$style.spinner]"
+        viewBox="0 0 67.733 67.733"
-                viewBox="0 0 50 50"
         xmlns="http://www.w3.org/2000/svg"
     >
-                <circle
+        <g :class="$style['mag-spinner-spin']">
-                    :class="[$style.path]"
+            <g transform="matrix(.82287 0 0 .82287 5.9984 5.9989)">
-                    cx="25"
+                <path
-                    cy="25"
+                    d="m33.959 0.8413c-8.3737-0.008823-16.592 3.1643-22.849 9.1188-8.8995 8.4685-12.376 21.177-9.023 32.996l5.9686-1.681c-2.7249-9.6065 0.095231-19.927 7.329-26.811 7.2337-6.8834 17.845-8.9517 26.103-6.264l1.9737-5.9045c-2.9094-0.98361-4.8438-1.2553-7.8257-1.41-0.55911-0.028992-1.1178-0.044097-1.676-0.04468zm31.826 24.715-6.0201 1.553c2.4674 9.2417-0.15852 19.094-6.8993 25.88-6.7409 6.7861-16.177 9.1968-25.564 6.8428l-1.6444 5.9555c11.39 2.9597 23.3-0.07129 31.594-8.4205 8.2936-8.3492 11.569-20.441 8.5336-31.811z"
-                    r="20"
+                    fill="currentColor"
-                    fill="none"
+                />
-                    stroke-width="6px"
+            </g>
-                    style="fill: none; stroke: currentColor; stroke-width: 6px"
+            <g
-                ></circle>
+                :class="$style['mag-butterflies']"
+                transform="matrix(1.2958 .098299 -.098299 1.2958 .41715 -18.811)"
+            >
+                <path
+                    d="m19.244 39.965c-0.62132 0.75445-1.2862 1.4845-1.8805 2.2541-0.45826 1.4275-0.95911 2.8484-1.3908 4.28 0.01197 0.7973 0.02382 1.5946 0.03574 2.3919-0.82611-0.0559-1.656-0.15529-2.4798-0.18435-1.4482 0.38557-2.9176 0.72632-4.3525 1.1398-0.76206 0.56257-1.5241 1.1251-2.2862 1.6877 0.00746 0.57752 0.014929 1.155 0.022392 1.7326 0.85814 0.49688 1.6647 1.0953 2.6101 1.4204 0.76646 0.32006 1.5329 0.64012 2.2994 0.96018 0.53911-0.39567 1.0782-0.79134 1.6173-1.187 0.01331 0.4126 0.02652 0.82522 0.03983 1.2378 0.55847 0.37816 1.0935 0.81873 1.6666 1.1579 0.94848 0.09538 1.897 0.19074 2.8454 0.28611 0.79636-0.46986 1.5927-0.93971 2.3891-1.4096-0.14459-0.67269-0.24382-1.3636-0.41647-2.025-0.40398-0.62711-0.79926-1.2606-1.2086-1.8838 0.62691 0.4569 1.2427 0.94576 1.8866 1.3706 0.63581 0.16906 1.2716 0.33814 1.9074 0.5072 0.52106-0.76381 1.0421-1.5276 1.5632-2.2914-0.05014-0.9802-0.03649-1.9797-0.12641-2.9479-0.33964-0.54964-0.67928-1.0993-1.0189-1.6489-0.41083-0.04035-0.82165-0.08069-1.2325-0.12099 0.43013-0.51202 0.86026-1.024 1.2904-1.5361-0.39788-1.1174-0.74239-2.2576-1.1736-3.3607-0.29327-0.56483-0.58654-1.1297-0.8798-1.6945-0.5758-0.0454-1.1516-0.09072-1.7274-0.13608z"
+                    fill="currentColor"
+                />
+            </g>
+            <g
+                :class="$style['mag-butterflies']"
+                transform="matrix(-1.2957 -.098293 .098293 -1.2957 66.781 86.854)"
+            >
+                <path
+                    d="m19.244 39.965c-0.62132 0.75445-1.2862 1.4845-1.8805 2.2541-0.45826 1.4275-0.95911 2.8484-1.3908 4.28 0.01197 0.7973 0.02382 1.5946 0.03574 2.3919-0.82611-0.0559-1.656-0.15529-2.4798-0.18435-1.4482 0.38557-2.9176 0.72632-4.3525 1.1398-0.76206 0.56257-1.5241 1.1251-2.2862 1.6877 0.00746 0.57752 0.014929 1.155 0.022392 1.7326 0.85814 0.49688 1.6647 1.0953 2.6101 1.4204 0.76646 0.32006 1.5329 0.64012 2.2994 0.96018 0.53911-0.39567 1.0782-0.79134 1.6173-1.187 0.01331 0.4126 0.02652 0.82522 0.03983 1.2378 0.55847 0.37816 1.0935 0.81873 1.6666 1.1579 0.94848 0.09538 1.897 0.19074 2.8454 0.28611 0.79636-0.46986 1.5927-0.93971 2.3891-1.4096-0.14459-0.67269-0.24382-1.3636-0.41647-2.025-0.40398-0.62711-0.79926-1.2606-1.2086-1.8838 0.62691 0.4569 1.2427 0.94576 1.8866 1.3706 0.63581 0.16906 1.2716 0.33814 1.9074 0.5072 0.52106-0.76381 1.0421-1.5276 1.5632-2.2914-0.05014-0.9802-0.03649-1.9797-0.12641-2.9479-0.33964-0.54964-0.67928-1.0993-1.0189-1.6489-0.41083-0.04035-0.82165-0.08069-1.2325-0.12099 0.43013-0.51202 0.86026-1.024 1.2904-1.5361-0.39788-1.1174-0.74239-2.2576-1.1736-3.3607-0.29327-0.56483-0.58654-1.1297-0.8798-1.6945-0.5758-0.0454-1.1516-0.09072-1.7274-0.13608z"
+                    fill="currentColor"
+                />
+            </g>
+        </g>
     </svg>
-        </div>
-    </div>
 </template>
 
 <script lang="ts" setup>
-import {} from "vue";
-
 const props = withDefaults(
     defineProps<{
         inline?: boolean;
@@ -44,14 +57,12 @@ const props = withDefaults(
         colored: true,
         mini: false,
         em: false,
-    },
+    }
 );
 </script>
 
 <style lang="scss" module>
-/* Credit to https://codepen.io/supah/pen/BjYLdW */
+@keyframes mag-loading-spin {
-
-@keyframes spin {
     0% {
         transform: rotate(0deg);
     }
@@ -60,25 +71,33 @@ const props = withDefaults(
     }
 }
 
-@keyframes dash {
+@keyframes mag-loading-butterfly-appear {
     0% {
-        stroke-dasharray: 1, 150;
+        opacity: 0;
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -35;
     }
     100% {
-        stroke-dasharray: 90, 150;
+        opacity: 1;
-        stroke-dashoffset: -124;
     }
 }
 
-.root {
+.mag-butterflies {
-    padding: 32px;
+    opacity: 0;
-    text-align: center;
+    animation: 1s mag-loading-butterfly-appear 0s 1 ease-out forwards;
+}
+
+.mag-spinner-spin {
+    animation: 2.5s mag-loading-spin infinite linear;
+    transform-origin: center;
+}
+
+.mag-spinner-loading {
+    display: block;
+
+    position: relative;
+    margin-block: 32px;
     cursor: wait;
+    width: var(--size);
+    height: var(--size);
 
     --size: 40px;
 
@@ -88,42 +107,22 @@ const props = withDefaults(
 
     &.inline {
         display: inline;
-        padding: 0;
         --size: 32px;
     }
 
     &.mini {
-        padding: 16px;
+        margin: 16px;
-        --size: 32px;
+        --size: 16px;
     }
+
+    &:not(.inline) {
+        margin-inline: auto;
+    }
+
     &.em {
         display: inline-block;
         vertical-align: middle;
-        padding: 0;
         --size: 1em;
     }
 }
-
-.container {
-    position: relative;
-    width: var(--size);
-    height: var(--size);
-    margin: 0 auto;
-}
-
-.spinner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 999;
-    width: var(--size);
-    height: var(--size);
-    animation: spin 2s linear infinite;
-}
-
-.path {
-    stroke: var(--accent);
-    stroke-linecap: round;
-    animation: dash 1.2s ease-in-out infinite;
-}
 </style>

fe_calckey/frontend/client/src/init.ts

@@ -60,12 +60,14 @@ import MkError from "./components/global/MkError.vue";
 import MkPageHeader from "./components/global/MkPageHeader.vue";
 import MkSpacer from "./components/global/MkSpacer.vue";
 import MkStickyContainer from "./components/global/MkStickyContainer.vue";
+import MagSpinner from "@/components/global/MagSpinner.vue";
 
 function globalComponents(app: App) {
     app.component("I18n", I18n);
     app.component("RouterView", RouterView);
     app.component("Mfm", Mfm);
     app.component("MkA", MkA);
+    app.component("MagSpinner", MagSpinner);
     app.component("MkAcct", MkAcct);
     app.component("MagAvatar", MagAvatar);
     app.component("MagEmoji", MagEmoji);
@@ -87,6 +89,7 @@ declare module "@vue/runtime-core" {
         RouterView: typeof RouterView;
         Mfm: typeof Mfm;
         MkA: typeof MkA;
+        MagSpinner: typeof MagSpinner;
         MkAcct: typeof MkAcct;
         MagAvatar: typeof MagAvatar;
         MagEmoji: typeof MagEmoji;

fe_calckey/frontend/client/src/ui/_common_/upload.vue

@@ -8,8 +8,7 @@
                 ></div>
                 <div class="top">
                     <p class="name">
-                        <i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i
+                        <MagSpinner />{{ ctx.name }}
-                        >{{ ctx.name }}
                     </p>
                     <p class="status">
                         <span

fe_calckey/frontend/locales/en-US.yml

@@ -34,6 +34,7 @@ loggingIn: "Signing In"
 logout: "Sign Out"
 signup: "Sign Up"
 uploading: "Uploading..."
+busy: "Busy..."
 save: "Save"
 users: "Users"
 addUser: "Add a user"