feat: add new spinner component

This commit is contained in:
2024-04-13 15:01:27 +07:00
parent 89f577fbef
commit ed6aca41ea
29 changed files with 177 additions and 102 deletions

View File

@@ -1,6 +1,7 @@
import { AvatarUploader } from "@/components/avatarUploader";
import { LoaderIcon, PlusIcon } from "@lume/icons";
import { PlusIcon } from "@lume/icons";
import { Metadata } from "@lume/types";
import { Spinner } from "@lume/ui";
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { useForm } from "react-hook-form";
@@ -134,11 +135,7 @@ function Screen() {
type="submit"
className="mt-3 inline-flex h-11 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
>
{loading ? (
<LoaderIcon className="size-4 animate-spin" />
) : (
t("global.continue")
)}
{loading ? <Spinner /> : t("global.continue")}
</button>
</form>
</div>

View File

@@ -1,4 +1,4 @@
import { LoaderIcon } from "@lume/icons";
import { Spinner } from "@lume/ui";
import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { toast } from "sonner";
@@ -82,7 +82,7 @@ function Screen() {
disabled={loading}
className="mt-3 inline-flex h-11 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
>
{loading ? <LoaderIcon className="size-4 animate-spin" /> : "Login"}
{loading ? <Spinner /> : "Login"}
</button>
</div>
</div>

View File

@@ -1,4 +1,4 @@
import { LaurelIcon, LoaderIcon } from "@lume/icons";
import { LaurelIcon } from "@lume/icons";
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useTranslation } from "react-i18next";
import * as Switch from "@radix-ui/react-switch";
@@ -9,6 +9,7 @@ import {
requestPermission,
} from "@tauri-apps/plugin-notification";
import { toast } from "sonner";
import { Spinner } from "@lume/ui";
export const Route = createFileRoute("/auth/settings")({
validateSearch: (search: Record<string, string>): AppRouteSearch => {
@@ -181,7 +182,7 @@ function Pending() {
return (
<div className="flex h-full w-full items-center justify-center">
<button type="button" className="size-5" disabled>
<LoaderIcon className="size-5 animate-spin" />
<Spinner className="size-5" />
</button>
</div>
);