WIP. add spinner emoji demo

src/components/2-main/9-showcases/cases/2-loaders.tsx

@@ -1,4 +1,4 @@
-import { LoaderDotsRing, SpinnerRadial, SpinnerDiv, SpinnerSvg } from "@/components/ui/loaders";
+import { LoaderDotsRing, SpinnerRadial, SpinnerDiv, SpinnerSvg, SpinnerEmoji } from "@/components/ui/loaders";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/shadcn";
 import { LoadersTest, SkeletonDemo, Spinner9 } from "../../2-demo/2-demo-loaders";
 import { PaginationDemo } from "../../2-demo/demo-pagination";
@@ -32,6 +32,7 @@ export function LoadersInTab() {
                     <SpinnerSvg className="w-8 h-8 stroke-[5] stroke-sky-500" />
                     <SpinnerDiv className="w-8 h-8" />
                     <Spinner9 className="w-8 h-8 text-sky-500" />
+                    <SpinnerEmoji className="text-4xl text-sky-500" />
                 </div>
             </TabsContent>
 

src/components/ui/loaders/index.tsx

@@ -2,6 +2,7 @@ export * from './ploaders/p-loader1'; // https://codepen.io/jkantner/pen/YzdpEVO
 export * from './ploaders/p-loader2';
 export * from './ploaders/p-loader3';
 export * from './dots-ring';
+export * from './spinner-emoji';
 export * from './spinner-radial';
 export * from './spinner-svg';
 export * from './spinner-div';

src/components/ui/loaders/spinner-emoji/index.tsx

@@ -0,0 +1,10 @@
+import { classNames } from "@/utils";
+import { HTMLAttributes } from "react";
+
+export function SpinnerEmoji({ className, ...rest }: HTMLAttributes<HTMLDivElement>) { // https://tanstack.com/router/v1/docs/examples/react/location-masking
+    return (
+        <div className={classNames("px-3 flex items-center justify-center animate-spin", className)} {...rest}>
+            ⍥
+        </div>
+    );
+}

vite.config.ts

@@ -13,6 +13,9 @@ function manualChunks(id: string) { //https://rollupjs.org/configuration-options
     if (id.includes("@codemirror")) {
         return "codemirror";
     }
+    if (id.includes("@nivo")) {
+        return "nivo";
+    }
     // if (id.includes("node_modules")) {
     //     return "vendor";
     // }