@multiverse-tech/loading-card

Shared loading card component with bounce icon + dot animation for Ommiii subsystems.

Installation

npm install @multiverse-tech/loading-card

Setup (Important)

1. Tailwind v4 @source directive

This package uses Tailwind CSS classes internally. Tailwind v4 does not scan node_modules by default, so you must add a @source directive in your project's main CSS file to include this package:

/* Vite projects (App Hub, SSO Frontend) - in src/index.css */
@source "../node_modules/@multiverse-tech/loading-card/dist";

/* Next.js projects (EVoucher Frontend) - in src/app/globals.css */
@source "../../../node_modules/@multiverse-tech/loading-card/dist";

Without this, Tailwind classes like w-96, h-72, h-16, w-16 used inside the package will NOT be generated in your CSS output, causing the card to render incorrectly.

2. Import the CSS animations

The package ships a separate styles.css for animations (bounce, dot blink). Import it once in your wrapper component:

import "@multiverse-tech/loading-card/styles.css";

3. Create a local wrapper (recommended)

Each project should create a local HubLoadingCard wrapper that injects the project-specific icon URL, so individual pages don't need to repeat it:

// src/components/ui/LoadingCard.tsx
import { LoadingCard, DotText } from "@multiverse-tech/loading-card";
import "@multiverse-tech/loading-card/styles.css";

// Vite projects
const HUB_ICON_URL = import.meta.env.VITE_HUB_ICON_URL;

// Next.js projects
// const HUB_ICON_URL = process.env.NEXT_PUBLIC_HUB_ICON_URL!;

export function HubLoadingCard({ message = "Loading" }: { message?: string }) {
  return <LoadingCard iconUrl={HUB_ICON_URL} iconAlt="Ommiii Hub" message={message} />;
}

export { LoadingCard, DotText };

Then in pages:

import { HubLoadingCard } from "@/components/ui/LoadingCard";

<HubLoadingCard message="Completing login" />

API

<LoadingCard />

| Prop | Type | Default | Description | |------|------|---------|-------------| | iconUrl | string | — | Icon image URL | | iconAlt | string | "Loading" | Alt text for the icon | | iconSize | string | "h-16 w-16" | Tailwind classes for icon size | | cardClassName | string | "w-80" | Tailwind classes for card size | | message | string | "Loading" | Loading message (dots added automatically) | | children | ReactNode | — | Custom content (overrides icon + message) |

<DotText />

Animated dot indicator: text...

| Prop | Type | Description | |------|------|-------------| | text | string | Text to display before the dots |

<OMMiiiText />

Brand text with colored letters (O=deep blue, MM=green, iii=light blue).

| Prop | Type | Default | Description | |------|------|---------|-------------| | suffix | string | — | Text appended after "OMMiii" |

Publishing

Prerequisites

• Logged in to npm: npm login
• Must have publish access to @multiverse-tech scope

Steps

1. Make changes in ~Shared_Packages/Shared_LoadingCard/src/

2. Bump version in package.json:

   "version": "1.0.3"

3. Build the package:

   cd ~Shared_Packages/Shared_LoadingCard
   npm run build

4. Publish to npm:

   npm publish --access public

5. Update all consuming projects:

   cd OMMiii_App_Hub_Frontend && npm install @multiverse-tech/loading-card@<new-version>
   cd SSO_Frontend && npm install @multiverse-tech/loading-card@<new-version>
   cd EVoucher_Frontend && npm install @multiverse-tech/loading-card@<new-version>

Checklist before publishing

• [ ] Version bumped in package.json
• [ ] npm run build succeeds
• [ ] If new Tailwind classes were added, verify @source in consuming projects picks them up
• [ ] If new exports were added, update exports field in package.json