### Install project dependencies

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/examples/solid-example/README.md

Use this command to install all required project dependencies before starting development.

```bash
$ npm install # or pnpm install or yarn install
```

--------------------------------

### Start Production Server

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/docs/README.md

Launches the production-ready server after building the project.

```bash
npm start
```

--------------------------------

### Install Shimmer From Structure

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Install the library using npm, yarn, or pnpm.

```bash
npm install shimmer-from-structure
# or
yarn add shimmer-from-structure
# or
pnpm add shimmer-from-structure
```

--------------------------------

### Run Development Server

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/docs/README.md

Starts the development server for the project. Access the site at http://localhost:3000.

```bash
npm run dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/docs/README.md

Run this command in your terminal to install project dependencies.

```bash
npm install
```

--------------------------------

### Install Shimmer for Vue Projects

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/MIGRATION.md

Install the Shimmer package for new Vue projects. This command installs the core package, which includes Vue support.

```bash
npm install shimmer-from-structure
```

--------------------------------

### Example Usage

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Illustrates how to use the Shimmer component with various frameworks, showcasing different prop configurations.

```APIDOC
## Example with All Props

### React

```tsx
<Shimmer
  loading={isLoading}
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  duration={2}
  fallbackBorderRadius={8}
  templateProps={{
    user: userTemplate,
    settings: settingsTemplate,
  }}
>
  <MyComponent user={user} settings={settings} />
</Shimmer>
```

### Vue

```vue
<Shimmer
  :loading="isLoading"
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  :duration="2"
  :fallbackBorderRadius="8"
  :templateProps="{
    user: userTemplate,
    settings: settingsTemplate,
  }">
  <MyComponent :user="user" :settings="settings" />
</Shimmer>
```

### Svelte

```svelte
<Shimmer
  loading={isLoading}
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  duration={2}
  fallbackBorderRadius={8}
  templateProps={{
    user: userTemplate,
    settings: settingsTemplate,
  }}>
  <MyComponent {user} {settings} />
</Shimmer>
```

### Angular

```typescript
<shimmer
  [loading]="isLoading()"
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  [duration]="2"
  [fallbackBorderRadius]="8"
  [templateProps]="{
    user: userTemplate,
    settings: settingsTemplate
  }">
  <app-my-component
    [user]="user()"
    [settings]="settings()" />
</shimmer>
```

### SolidJS

```tsx
<Shimmer
  loading={isLoading()}
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  duration={2}
  fallbackBorderRadius={8}
  templateProps={{
    user: userTemplate,
    settings: settingsTemplate,
  }}>
  <MyComponent user={user()} settings={settings()} />
</Shimmer>
```
```

--------------------------------

### Monorepo Development Commands

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Commands for installing dependencies, building all packages, building individual packages, and running tests in the npm workspaces monorepo.

```bash
# Install dependencies
npm install

# Build all packages
npm run build

# Build individual packages
npm run build:core
npm run build:react
npm run build:vue
npm run build:svelte
npm run build:main

# Run tests
npm test
```

--------------------------------

### Vue Project Setup

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/MIGRATION.md

Set up Shimmer in a Vue project using the provided import paths. You can import directly from 'shimmer-from-structure/vue' or rely on auto-detection from the main package.

```vue
<script setup>
import { Shimmer } from 'shimmer-from-structure/vue';
// or auto-detect: import { Shimmer } from 'shimmer-from-structure';
</script>
```

--------------------------------

### Dynamic Content with templateProps

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/solid/README.md

Examples of using the `templateProps` feature to provide mock data for skeleton generation in various frameworks.

```APIDOC
## Dynamic Content with `templateProps`

### Description
For components that receive dynamic data via props, use `templateProps` to provide mock data for skeleton generation.

### React Example
```tsx
import { Shimmer } from 'shimmer-from-structure';

const UserCard = ({ user }) => (
  <div className="card">
    <img src={user.avatar} className="avatar" />
    <h2>{user.name}</h2>
    <p>{user.role}</p>
  </div>
);

const userTemplate = {
  name: 'Loading...', 
  role: 'Loading role...', 
  avatar: 'placeholder.jpg',
};

function App() {
  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState(null);

  return (
    <Shimmer loading={loading} templateProps={{ user: userTemplate }}>
      <UserCard user={user || userTemplate} />
    </Shimmer>
  );
}
```

### Vue Example
```vue
<script setup>
import { ref } from 'vue';
import { Shimmer } from '@shimmer-from-structure/vue';
import UserCard from './UserCard.vue';

const loading = ref(true);
const userTemplate = {
  name: 'Loading...', 
  role: 'Loading role...', 
  avatar: 'placeholder.jpg',
};
</script>

<template>
  <Shimmer :loading="loading" :templateProps="{ user: userTemplate }">
    <UserCard :user="user || userTemplate" />
  </Shimmer>
</template>
```

### Svelte Example
```svelte
<script>
import { Shimmer } from '@shimmer-from-structure/svelte';
import UserCard from './UserCard.svelte';

let { user } = $props();
let loading = $state(true);

const userTemplate = {
  name: 'Loading...', 
  role: 'Loading role...', 
  avatar: 'placeholder.jpg',
};
</script>

<Shimmer loading={loading} templateProps={{ user: userTemplate }}>
  <UserCard user={user || userTemplate} />
</Shimmer>
```

### Angular Example
```typescript
import { Component, signal } from '@angular/core';
import { ShimmerComponent } from '@shimmer-from-structure/angular';
import { UserCardComponent } from './user-card.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ShimmerComponent, UserCardComponent],
  template: `
    <shimmer [loading]="loading()" [templateProps]="{ user: userTemplate }">
      <app-user-card [user]="user() || userTemplate" />
    </shimmer>
  `,
})
export class AppComponent {
  loading = signal(true);
  user = signal<User | null>(null);

  userTemplate = {
    name: 'Loading...', 
    role: 'Loading role...', 
    avatar: 'placeholder.jpg',
  };
}
```

### SolidJS Example
```tsx
import { createSignal } from 'solid-js';
import { Shimmer } from '@shimmer-from-structure/solid';
import { UserCard } from './UserCard';

function App() {
  const [loading, setLoading] = createSignal(true);
  const [user, setUser] = createSignal(null);

  const userTemplate = {
    name: 'Loading...', 
    role: 'Loading role...', 
    avatar: 'placeholder.jpg',
  };

  return (
    <Shimmer loading={loading()} templateProps={{ user: userTemplate }}>
      <UserCard user={user() || userTemplate} />
    </Shimmer>
  );
}
```

### Explanation
The `templateProps` object is spread onto the first child component when loading, allowing it to render with mock data for measurement.
```

--------------------------------

### Shimmer Component Usage with All Props

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Demonstrates how to use the Shimmer component with all available props for customization. This example shows how to control the loading state, shimmer and background colors, animation duration, fallback border radius, and template props for skeleton rendering.

```tsx
<Shimmer
  loading={isLoading}
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  duration={2}
  fallbackBorderRadius={8}
  templateProps={{
    user: userTemplate,
    settings: settingsTemplate,
  }}>
  <MyComponent user={user} settings={settings} />
</Shimmer>
```

```vue
<Shimmer
  :loading="isLoading"
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  :duration="2"
  :fallbackBorderRadius="8"
  :templateProps="{
    user: userTemplate,
    settings: settingsTemplate,
  }">
  <MyComponent :user="user" :settings="settings" />
</Shimmer>
```

```svelte
<Shimmer
  loading={isLoading}
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  duration={2}
  fallbackBorderRadius={8}
  templateProps={{
    user: userTemplate,
    settings: settingsTemplate,
  }}>
  <MyComponent {user} {settings} />
</Shimmer>
```

```typescript
<shimmer
  [loading]="isLoading()"
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  [duration]="2"
  [fallbackBorderRadius]="8"
  [templateProps]="{
    user: userTemplate,
    settings: settingsTemplate
  }">
  <app-my-component
    [user]="user()"
    [settings]="settings()" />
</shimmer>
```

```tsx
<Shimmer
  loading={isLoading()}
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  duration={2}
  fallbackBorderRadius={8}
  templateProps={{
    user: userTemplate,
    settings: settingsTemplate,
  }}>
  <MyComponent user={user()} settings={settings()} />
</Shimmer>
```

--------------------------------

### Transactions List Loading State (Angular)

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Provides an example of using the Shimmer component in Angular to display a loading state for a transactions list.

```typescript
<shimmer
  [loading]="loadingTransactions()"
  [templateProps]="{ transactions: transactionsTemplate }">
  <app-transactions-list [transactions]="transactions()" />
</shimmer>
```

--------------------------------

### Angular Static Content Shimmer

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

This example demonstrates using the Shimmer component for static content within an Angular application. Import ShimmerComponent from '@shimmer-from-structure/angular' and use signal for the loading state.

```typescript
import { Component, signal } from '@angular/core';
import { ShimmerComponent } from '@shimmer-from-structure/angular';

@Component({
  selector: 'app-user-card',
  standalone: true,
  imports: [ShimmerComponent],
  template: `
    <shimmer [loading]="isLoading()">
      <div class="card">
        <img src="avatar.jpg" class="avatar" />
        <h2>John Doe</h2>
        <p>Software Engineer</p>
      </div>
    </shimmer>
  `,
})
export class UserCardComponent {
  isLoading = signal(true);
}
```

--------------------------------

### Vue Static Content Shimmer

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

This example shows how to implement Shimmer for static content within a Vue.js application. Import Shimmer from '@shimmer-from-structure/vue' and use it with a loading state.

```vue
<script setup>
import { ref } from 'vue';
import { Shimmer } from '@shimmer-from-structure/vue';

const isLoading = ref(true);
</script>

<template>
  <Shimmer :loading="isLoading">
    <div class="card">
      <img src="avatar.jpg" class="avatar" />
      <h2>John Doe</h2>
      <p>Software Engineer</p>
    </div>
  </Shimmer>
</template>
```

--------------------------------

### Team Members Grid Loading State (Angular)

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Provides an example of using the Shimmer component in Angular to display a loading state for a team members grid.

```typescript
<shimmer
  [loading]="loadingTeam()"
  [templateProps]="{ members: teamTemplate }">
  <app-team-members [members]="team()" />
</shimmer>
```

--------------------------------

### Install Svelte 5 Dependencies

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/MIGRATION.md

Update npm dependencies to include Svelte 5 and related Vite plugins. This command ensures compatibility with the new Svelte version.

```bash
npm install svelte@^5.0.0 @sveltejs/vite-plugin-svelte@^4.0.0 svelte-check@^4.0.0
```

--------------------------------

### Pin Shimmer to Svelte 4

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/MIGRATION.md

If you cannot upgrade to Svelte 5, install a specific version of the Shimmer package that supports Svelte 4. This command pins the dependency to v1.x.

```bash
npm install @shimmer-from-structure/svelte@^1.1.0
```

--------------------------------

### Clone Repository and Navigate

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/CONTRIBUTING.md

Clone your fork of the repository and navigate into the project directory.

```bash
git clone https://github.com/darula-hpp/shimmer-from-structure.git
cd shimmer-from-structure
```

--------------------------------

### Build for Production

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/docs/README.md

Compiles the project for production deployment.

```bash
npm run build
```

--------------------------------

### Angular Local Shimmer Override

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Override globally injected Shimmer configurations locally in Angular. This example demonstrates setting a custom duration for a shimmer component.

```typescript
<!-- Inherits blue theme from injected config -->
<shimmer [loading]="true"><app-user-card /></shimmer>

<!-- Overrides injected settings -->
<shimmer [loading]="true" [duration]="0.5"><app-fast-card /></shimmer>
```

--------------------------------

### Import Shimmer Component by Framework

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/README.md

Import the Shimmer component from the appropriate framework-specific package.

```javascript
// React projects (or @shimmer-from-structure/react)
import { Shimmer } from 'shimmer-from-structure';
```

```javascript
// Vue 3 projects
import { Shimmer } from '@shimmer-from-structure/vue';
```

```javascript
// Svelte projects
import { Shimmer } from '@shimmer-from-structure/svelte';
```

```typescript
// Angular projects
import { ShimmerComponent } from '@shimmer-from-structure/angular';
```

```tsx
// SolidJS projects
import { Shimmer } from '@shimmer-from-structure/solid';
```

--------------------------------

### Vue Local Shimmer Override

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Override global Shimmer configurations locally in Vue. This example demonstrates setting a custom duration for a specific Shimmer component.

```vue
<!-- Inherits blue theme from provider -->
<Shimmer :loading="true"><UserCard /></Shimmer>

<!-- Overrides provider settings -->
<Shimmer :loading="true" :duration="0.5"><FastCard /></Shimmer>
```

--------------------------------

### React Local Shimmer Override

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Override global Shimmer configurations locally in React. This example shows how to apply a shorter duration to a specific Shimmer component.

```tsx
// Inherits blue theme from provider
<Shimmer loading={true}><UserCard /></Shimmer>

// Overrides provider settings
<Shimmer loading={true} duration={0.5}><FastCard /></Shimmer>
```

--------------------------------

### Configure Shimmer with All Props

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/solid/README.md

Demonstrates the full configuration of the Shimmer component, including colors, duration, and template props.

```tsx
<Shimmer
  loading={isLoading}
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  duration={2}
  fallbackBorderRadius={8}
  templateProps={{
    user: userTemplate,
    settings: settingsTemplate,
  }}
>
  <MyComponent user={user} settings={settings} />
</Shimmer>
```

```vue
<Shimmer
  :loading="isLoading"
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  :duration="2"
  :fallbackBorderRadius="8"
  :templateProps="{
    user: userTemplate,
    settings: settingsTemplate,
  }"
>
  <MyComponent :user="user" :settings="settings" />
</Shimmer>
```

```svelte
<Shimmer
  loading={isLoading}
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  duration={2}
  fallbackBorderRadius={8}
  templateProps={{
    user: userTemplate,
    settings: settingsTemplate,
  }}
>
  <MyComponent {user} {settings} />
</Shimmer>
```

```typescript
<shimmer
  [loading]="isLoading()"
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  [duration]="2"
  [fallbackBorderRadius]="8"
  [templateProps]="{
    user: userTemplate,
    settings: settingsTemplate
  }">
  <app-my-component
    [user]="user()"
    [settings]="settings()" />
</shimmer>
```

```tsx
<Shimmer
  loading={isLoading()}
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  duration={2}
  fallbackBorderRadius={8}
  templateProps={{
    user: userTemplate,
    settings: settingsTemplate,
  }}
>
  <MyComponent user={user()} settings={settings()} />
</Shimmer>
```

--------------------------------

### Run All Tests

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/CONTRIBUTING.md

Execute all tests in the project using Vitest. Ensure all tests pass before submitting a Pull Request.

```bash
npm test
```

--------------------------------

### Update Svelte Main Entry Point

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/MIGRATION.md

Modify your `main.ts` file to use the new Svelte 5 mounting function. This is required if you were using the old mounting syntax.

```typescript
import { mount } from 'svelte';
import App from './App.svelte';

mount(App, { target: document.getElementById('app')! });
```

--------------------------------

### Build Specific Packages

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/CONTRIBUTING.md

Build individual packages within the monorepo. Use this for targeted development or testing.

```bash
npm run build:core
```

```bash
npm run build:react
```

```bash
npm run build:vue
```

```bash
npm run build:svelte
```

```bash
npm run build:angular
```

```bash
npm run build:solid
```

```bash
npm run build:main
```

--------------------------------

### Build Specific Packages in Monorepo

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/MIGRATION.md

Commands to build individual packages within the monorepo. Useful for contributors to develop and test packages independently.

```bash
npm run build:core
npm run build:react
npm run build:vue
npm run build:main
```

--------------------------------

### Svelte Accessing Shimmer Config

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Get the current Shimmer configuration in Svelte components using the getShimmerConfig function. This allows direct access to configuration properties like backgroundColor.

```javascript
import { getShimmerConfig } from '@shimmer-from-structure/svelte';

const config = getShimmerConfig();
console.log(config.backgroundColor);
```

--------------------------------

### Import Shimmer for SolidJS

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/solid/README.md

Import the Shimmer component for SolidJS projects from the specific adapter package.

```tsx
// SolidJS projects
import { Shimmer } from '@shimmer-from-structure/solid';
```

--------------------------------

### SolidJS Local Shimmer Override

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Override global Shimmer configurations locally in SolidJS. This example shows how to set a custom duration for a Shimmer component, overriding the provider's settings.

```tsx
<!-- Inherits blue theme from provider -->
<Shimmer loading={true()}><UserCard /></Shimmer>

<!-- Overrides provider settings -->
<Shimmer loading={true()} duration={0.5}><FastCard /></Shimmer>
```

--------------------------------

### Svelte Local Shimmer Override

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Override global Shimmer configurations locally in Svelte. This example shows how to set a custom duration for a Shimmer component, overriding the provider's settings.

```svelte
<!-- Inherits blue theme from provider -->
<Shimmer loading={true}><UserCard /></Shimmer>

<!-- Overrides provider settings -->
<Shimmer loading={true} duration={0.5}><FastCard /></Shimmer>
```

--------------------------------

### SolidJS Dynamic Content Shimmer with templateProps

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Use this SolidJS snippet for dynamic content loading with Shimmer and templateProps. It enables the skeleton to display mock data while waiting for actual data.

```tsx
import { createSignal } from 'solid-js';
import { Shimmer } from '@shimmer-from-structure/solid';
import { UserCard } from './UserCard';

function App() {
  const [loading, setLoading] = createSignal(true);
  const [user, setUser] = createSignal(null);

  const userTemplate = {
    name: 'Loading...', 
    role: 'Loading role...',
    avatar: 'placeholder.jpg',
  };

  return (
    <Shimmer loading={loading()} templateProps={{ user: userTemplate }}>
      <UserCard user={user() || userTemplate} />
    </Shimmer>
  );
}
```

--------------------------------

### Implement Dashboard with Multiple Sections

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/solid/README.md

Shows how to manage independent loading states for different sections of a dashboard.

```tsx
function Dashboard() {
  const [loadingUser, setLoadingUser] = useState(true);
  const [loadingStats, setLoadingStats] = useState(true);

  return (
    <>
      {/* User profile section */}
      <Shimmer loading={loadingUser} templateProps={{ user: userTemplate }}>
        <UserProfile user={user} />
      </Shimmer>

      {/* Stats section - with custom colors */}
      <Shimmer
        loading={loadingStats}
        templateProps={{ stats: statsTemplate }}
        shimmerColor="rgba(20, 184, 166, 0.2)"
      >
        <StatsGrid stats={stats} />
      </Shimmer>
    </>
  );
}
```

```vue
<template>
  <!-- User profile section -->
  <Shimmer :loading="loadingUser" :templateProps="{ user: userTemplate }">
    <UserProfile :user="user" />
  </Shimmer>

  <!-- Stats section - with custom colors -->
  <Shimmer
    :loading="loadingStats"
    :templateProps="{ stats: statsTemplate }"
    shimmerColor="rgba(20, 184, 166, 0.2)"
  >
    <StatsGrid :stats="stats" />
  </Shimmer>
</template>
```

```svelte
<Shimmer loading={loadingUser} templateProps={{ user: userTemplate }}>
  <UserProfile {user} />
</Shimmer>

<Shimmer
  loading={loadingStats}
  templateProps={{ stats: statsTemplate }}
  shimmerColor="rgba(20, 184, 166, 0.2)"
>
  <StatsGrid {stats} />
</Shimmer>
```

```typescript
@Component({
  template: `
    <!-- User profile section -->
    <shimmer [loading]="loadingUser()" [templateProps]="{ user: userTemplate }">
      <app-user-profile [user]="user()" />
    </shimmer>

    <!-- Stats section - with custom colors -->
    <shimmer
      [loading]="loadingStats()"
      [templateProps]="{ stats: statsTemplate }"
      shimmerColor="rgba(20, 184, 166, 0.2)"
    >
      <app-stats-grid [stats]="stats()" />
    </shimmer>
  `,
})
export class DashboardComponent {
  loadingUser = signal(true);
  loadingStats = signal(true);
  // ...
}
```

--------------------------------

### Update Svelte App Mounting Syntax

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/MIGRATION.md

Migrate from the old Svelte mounting syntax to the new Svelte 5 `mount` function. Ensure the target element exists.

```diff
   import App from './App.svelte';
   const app = new App({ target: document.getElementById('app') });

   + import { mount } from 'svelte';
   + import App from './App.svelte';
   + const app = mount(App, { target: document.getElementById('app') });
```

--------------------------------

### Import Shimmer for React

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/solid/README.md

Import the Shimmer component for React projects. This is included in the main package.

```javascript
// React projects (or @shimmer-from-structure/react)
import { Shimmer } from 'shimmer-from-structure';
```

--------------------------------

### Optional: Explicit React Adapter Import

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/MIGRATION.md

For improved clarity, React users can optionally switch to importing directly from the '@shimmer-from-structure/react' package. The original import path is still supported.

```diff
- import { Shimmer, ShimmerProvider } from 'shimmer-from-structure';
+ import { Shimmer, ShimmerProvider } from '@shimmer-from-structure/react';
```

--------------------------------

### React Dynamic Content Shimmer with templateProps

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Implement dynamic content loading in React using Shimmer and templateProps. This allows the skeleton to render with mock data when the actual data is not yet available.

```tsx
import { Shimmer } from 'shimmer-from-structure';

// Your component that accepts props
const UserCard = ({ user }) => (
  <div className="card">
    <img src={user.avatar} className="avatar" />
    <h2>{user.name}</h2>
    <p>{user.role}</p>
  </div>
);

// Template data for the skeleton
const userTemplate = {
  name: 'Loading...', 
  role: 'Loading role...',
  avatar: 'placeholder.jpg',
};

function App() {
  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState(null);

  return (
    <Shimmer loading={loading} templateProps={{ user: userTemplate }}>
      <UserCard user={user || userTemplate} />
    </Shimmer>
  );
}
```

--------------------------------

### Import Shimmer for Angular

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/solid/README.md

Import the ShimmerComponent for Angular projects from the specific adapter package.

```typescript
// Angular projects
import { ShimmerComponent } from '@shimmer-from-structure/angular';
```

--------------------------------

### Apply Custom Theme with Config Provider

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/examples/angular-example/src/app/app.component.html

Applies a global blue theme to shimmer elements using a config provider. Displays name and role for the first two team members.

```html
@for (member of contextData() || teamTemplate.slice(0, 2); track member.id) {

{{ member.name }}

{{ member.role }}

}
```

--------------------------------

### Format Code

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/CONTRIBUTING.md

Format code according to project standards using Prettier.

```bash
npm run format
```

--------------------------------

### Display User Information with Shimmer

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/examples/angular-example/src/app/app.component.html

Displays user name, email, role, and status. Uses a fallback template if user data is not available.

```html
{{ (user() || userTemplate).name }}
-----------------------------------

{{ (user() || userTemplate).email }}

{{ (user() || userTemplate).role }}

{{ (user() || userTemplate).status }}
```

--------------------------------

### React Project Import (Backward Compatible)

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/MIGRATION.md

For React projects, existing imports from 'shimmer-from-structure' continue to work without changes. This ensures backward compatibility.

```tsx
// This still works exactly as before
import { Shimmer, ShimmerProvider } from 'shimmer-from-structure';
```

--------------------------------

### Team Members Grid Loading State (Vue)

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Demonstrates implementing a loading state for a team members grid in Vue using the Shimmer component.

```vue
<Shimmer :loading="loadingTeam" :templateProps="{ members: teamTemplate }">
  <TeamMembers :members="team" />
</Shimmer>
```

--------------------------------

### Svelte Dynamic Content Shimmer with templateProps

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Integrate dynamic content loading in Svelte with Shimmer and templateProps. This ensures the skeleton displays mock data while waiting for actual data.

```svelte
<script>
import { Shimmer } from '@shimmer-from-structure/svelte';
import UserCard from './UserCard.svelte';

let { user } = $props();
let loading = $state(true);

const userTemplate = {
  name: 'Loading...', 
  role: 'Loading role...',
  avatar: 'placeholder.jpg',
};
</script>

<Shimmer loading={loading} templateProps={{ user: userTemplate }}>
  <UserCard user={user || userTemplate} />
</Shimmer>
```

--------------------------------

### Import Shimmer for Svelte

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/solid/README.md

Import the Shimmer component for Svelte projects from the specific adapter package.

```javascript
// Svelte projects
import { Shimmer } from '@shimmer-from-structure/svelte';
```

--------------------------------

### Basic Suspense Pattern with Shimmer

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Demonstrates how to use Shimmer as a fallback for a lazy-loaded component within React Suspense. Ensure `shimmer-from-structure` is imported.

```tsx
import { Suspense, lazy } from 'react';
import { Shimmer } from 'shimmer-from-structure';

const UserProfile = lazy(() => import('./UserProfile'));

function App() {
  return (
    <Suspense
      fallback={
        <Shimmer loading={true} templateProps={{ user: userTemplate }}>
          <UserProfile />
        </Shimmer>
      }
    >
      <UserProfile userId="123" />
    </Suspense>
  );
}
```

--------------------------------

### SolidJS Global Configuration with ShimmerProvider

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Configure global shimmer settings for SolidJS applications using ShimmerProvider. This allows setting default shimmer color, background color, duration, and fallback border radius for all child components.

```tsx
import { Shimmer, ShimmerProvider } from '@shimmer-from-structure/solid';

function App() {
  return (
    <ShimmerProvider
      config={{
        shimmerColor: 'rgba(56, 189, 248, 0.4)',
        backgroundColor: 'rgba(56, 189, 248, 0.1)',
        duration: 2.5,
        fallbackBorderRadius: 8,
      }}
    >
      <Dashboard />
    </ShimmerProvider>
  );
}
```

--------------------------------

### Push Changes to Fork

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/CONTRIBUTING.md

Push your local branch with changes to your GitHub fork.

```bash
git push origin feature/amazing-feature
```

--------------------------------

### Dashboard with Multiple Sections (Vue)

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Shows how to implement Shimmer for distinct loading states within a Vue dashboard, including the ability to customize shimmer colors.

```vue
<template>
  <!-- User profile section -->
  <Shimmer :loading="loadingUser" :templateProps="{ user: userTemplate }">
    <UserProfile :user="user" />
  </Shimmer>

  <!-- Stats section - with custom colors -->
  <Shimmer
    :loading="loadingStats"
    :templateProps="{ stats: statsTemplate }"
    shimmerColor="rgba(20, 184, 166, 0.2)"
  >
    <StatsGrid :stats="stats" />
  </Shimmer>
</template>
```

--------------------------------

### SolidJS: Dynamic Content with templateProps

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/solid/README.md

Apply templateProps in SolidJS to provide mock data for skeleton rendering. The mock data is passed as props to the child component when loading.

```tsx
import { createSignal } from 'solid-js';
import { Shimmer } from '@shimmer-from-structure/solid';
import { UserCard } from './UserCard';

function App() {
  const [loading, setLoading] = createSignal(true);
  const [user, setUser] = createSignal(null);

  const userTemplate = {
    name: 'Loading...', 
    role: 'Loading role...', 
    avatar: 'placeholder.jpg',
  };

  return (
    <Shimmer loading={loading()} templateProps={{ user: userTemplate }}>
      <UserCard user={user() || userTemplate} />
    </Shimmer>
  );
}
```

--------------------------------

### React Global Configuration with ShimmerProvider

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Set default shimmer and background colors, duration, and fallback border radius for all Shimmer components within the app using ShimmerProvider.

```tsx
import { Shimmer, ShimmerProvider } from '@shimmer-from-structure/react';

function App() {
  return (
    // Set global defaults
    <ShimmerProvider
      config={{
        shimmerColor: 'rgba(56, 189, 248, 0.4)', // Blue shimmer
        backgroundColor: 'rgba(56, 189, 248, 0.1)', // Blue background
        duration: 2.5,
        fallbackBorderRadius: 8,
      }}
    >
      <Dashboard />
    </ShimmerProvider>
  );
}
```

--------------------------------

### Create a New Branch

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/CONTRIBUTING.md

Create a new Git branch for your feature or bug fix.

```bash
git checkout -b feature/amazing-feature
```

--------------------------------

### Display Weekly Revenue Chart Data with Shimmer

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/examples/angular-example/src/app/app.component.html

Iterates through chart data points to display their names. Uses a fallback template.

```html
@for (point of chartData() || chartTemplate; track point.name; let i = $index) { {{ point.name }} }
```

--------------------------------

### Import Shimmer for Vue 3

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/solid/README.md

Import the Shimmer component for Vue 3 projects from the specific adapter package.

```javascript
// Vue 3 projects
import { Shimmer } from '@shimmer-from-structure/vue';
```

--------------------------------

### Global Shimmer Configuration - Vue Provide/Inject

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/README.md

Set global Shimmer configurations in a Vue application using `provideShimmerConfig`. This function should be called at the application's root.

```vue
<!-- App.vue -->
<script setup>
import { provideShimmerConfig } from '@shimmer-from-structure/vue';

provideShimmerConfig({
  shimmerColor: 'rgba(56, 189, 248, 0.4)',
  backgroundColor: 'rgba(56, 189, 248, 0.1)',
  duration: 2.5,
  fallbackBorderRadius: 8,
});
</script>

<template>
  <router-view />
</template>
```

--------------------------------

### Global Shimmer Configuration - Angular Dependency Injection

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/README.md

Set global Shimmer configurations in Angular using `provideShimmerConfig` within the `providers` array during application bootstrapping. This enables centralized configuration.

```typescript
// main.ts or bootstrapApplication
import { bootstrapApplication } from '@angular/platform-browser';
import { provideShimmerConfig } from '@shimmer-from-structure/angular';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideShimmerConfig({
      shimmerColor: 'rgba(56, 189, 248, 0.4)',
      backgroundColor: 'rgba(56, 189, 248, 0.1)',
      duration: 2.5,
      fallbackBorderRadius: 8,
    }),
  ],
});
```

--------------------------------

### Vue Dynamic Content Shimmer with templateProps

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Use this Vue snippet for dynamic content loading with Shimmer and templateProps. It provides mock data for the skeleton when real data is pending.

```vue
<script setup>
import { ref } from 'vue';
import { Shimmer } from '@shimmer-from-structure/vue';
import UserCard from './UserCard.vue';

const loading = ref(true);
const userTemplate = {
  name: 'Loading...', 
  role: 'Loading role...',
  avatar: 'placeholder.jpg',
};
</script>

<template>
  <Shimmer :loading="loading" :templateProps="{ user: userTemplate }">
    <UserCard :user="user || userTemplate" />
  </Shimmer>
</template>
```

--------------------------------

### Display Recent Orders with Shimmer

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/examples/angular-example/src/app/app.component.html

Iterates through recent orders to display customer, product, amount, and status. Uses a fallback template.

```html
@for (order of orders() || ordersTemplate; track order.id) { }

Customer

Product

Amount

Status

{{ order.customer }}

{{ order.product }}

{{ order.amount }}

{{ order.status }}
```

--------------------------------

### Dashboard with Multiple Sections (Svelte)

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Illustrates Shimmer usage for managing separate loading states in a Svelte dashboard, with support for custom shimmer color configurations.

```svelte
<Shimmer loading={loadingUser} templateProps={{ user: userTemplate }}>
  <UserProfile {user} />
</Shimmer>

<Shimmer
  loading={loadingStats}
  templateProps={{ stats: statsTemplate }}
  shimmerColor="rgba(20, 184, 166, 0.2)"
>
  <StatsGrid {stats} />
</Shimmer>
```

--------------------------------

### Control Shimmer with HTML Attributes

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/examples/angular-example/src/app/app.component.html

Demonstrates `data-shimmer-ignore` to exclude elements and `data-shimmer-no-children` to treat an element as a single shimmer block.

```html
@for (card of attributesDemoData() || metricCardsTemplate; track card.id; let i = $index) {

{{ card.title }} @if (card.isLive) { ● LIVE }

@if (i === 1) {

{{ card.value }} {{ card.trend === 'up' ? '↑' : '↓' }} {{ card.change }}

} @else {

{{ card.value }} {{ card.trend === 'up' ? '↑' : '↓' }} {{ card.change }}

}

@if (i === 0) { "LIVE" badge skipped via data-shimmer-ignore } @else if (i === 1) { Metric block is one shimmer via data-shimmer-no-children } @else { Normal shimmer (no attributes) }

}
```

--------------------------------

### Shimmer Component Props

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/solid/README.md

Reference for the Shimmer component's available props, their types, default values, and descriptions.

```APIDOC
## Shimmer Component Props

### Description
Reference for the Shimmer component's available props, their types, default values, and descriptions.

### Parameters
#### Request Body
- **loading** (boolean) - Required - Whether to show shimmer effect or actual content
- **children** (React.ReactNode) - Required - The content to render/measure
- **shimmerColor** (string) - Optional - Color of the shimmer wave. Default: 'rgba(255,255,255,0.15)'
- **backgroundColor** (string) - Optional - Background color of shimmer blocks. Default: 'rgba(255,255,255,0.08)'
- **duration** (number) - Optional - Animation duration in seconds. Default: 1.5
- **fallbackBorderRadius** (number) - Optional - Border radius (px) for elements with no CSS border-radius. Default: 4
- **templateProps** (Record<string, unknown>) - Optional - Props to inject into first child for skeleton rendering.
```

--------------------------------

### Vue Project Import

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/MIGRATION.md

Use the Vue-specific package import for Vue projects. This ensures you are using the correct adapter for Vue.

```vue
// Use the Vue-specific package import { Shimmer, provideShimmerConfig } from
'@shimmer-from-structure/vue';
```

--------------------------------

### Display Recent Transactions with Shimmer

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/examples/angular-example/src/app/app.component.html

Iterates through recent transactions to display description, date, amount, and status. Uses a fallback template.

```html
@for (tx of transactions() || transactionsTemplate; track tx.id) {

{{ tx.description }}

{{ tx.date }}

{{ tx.amount }} {{ tx.status }}

}
```

--------------------------------

### Dashboard with Multiple Sections (React)

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Demonstrates using Shimmer for independent loading states in different sections of a dashboard. Supports custom shimmer colors.

```tsx
function Dashboard() {
  const [loadingUser, setLoadingUser] = useState(true);
  const [loadingStats, setLoadingStats] = useState(true);

  return (
    <>
      {/* User profile section */}
      <Shimmer loading={loadingUser} templateProps={{ user: userTemplate }}>
        <UserProfile user={user} />
      </Shimmer>

      {/* Stats section - with custom colors */}
      <Shimmer
        loading={loadingStats}
        templateProps={{ stats: statsTemplate }}
        shimmerColor="rgba(20, 184, 166, 0.2)"
      >
        <StatsGrid stats={stats} />
      </Shimmer>
    </>
  );
}
```

--------------------------------

### Angular Dynamic Content Shimmer with templateProps

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Implement dynamic content loading in Angular using ShimmerComponent and templateProps. This provides mock data for the skeleton during loading states.

```typescript
import { Component, signal } from '@angular/core';
import { ShimmerComponent } from '@shimmer-from-structure/angular';
import { UserCardComponent } from './user-card.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ShimmerComponent, UserCardComponent],
  template: '
    <shimmer [loading]="loading()" [templateProps]="{ user: userTemplate }">
      <app-user-card [user]="user() || userTemplate" />
    </shimmer>
  ',
})
export class AppComponent {
  loading = signal(true);
  user = signal<User | null>(null);

  userTemplate = {
    name: 'Loading...', 
    role: 'Loading role...',
    avatar: 'placeholder.jpg',
  };
}
```

--------------------------------

### Clear TypeScript Cache and Reinstall Dependencies

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/MIGRATION.md

Use this command to resolve TypeScript errors or missing IntelliSense after an upgrade. It removes existing node_modules and package-lock.json, then reinstalls all dependencies.

```bash
rm -rf node_modules package-lock.json
npm install
```

--------------------------------

### Vue: Dynamic Content with templateProps

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/solid/README.md

Implement templateProps in Vue for skeleton generation with dynamic data. The mock data is passed as props to the child component during loading.

```vue
<script setup>
import { ref } from 'vue';
import { Shimmer } from '@shimmer-from-structure/vue';
import UserCard from './UserCard.vue';

const loading = ref(true);
const userTemplate = {
  name: 'Loading...', 
  role: 'Loading role...', 
  avatar: 'placeholder.jpg',
};
</script>

<template>
  <Shimmer :loading="loading" :templateProps="{ user: userTemplate }">
    <UserCard :user="user || userTemplate" />
  </Shimmer>
</template>
```

--------------------------------

### Global Shimmer Configuration - React Context API

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/README.md

Configure default Shimmer properties globally in a React application using the `ShimmerProvider`. This allows for consistent theming without prop drilling.

```tsx
import { Shimmer, ShimmerProvider } from '@shimmer-from-structure/react';

function App() {
  return (
    // Set global defaults
    <ShimmerProvider
      config={{
        shimmerColor: 'rgba(56, 189, 248, 0.4)', // Blue shimmer
        backgroundColor: 'rgba(56, 189, 248, 0.1)', // Blue background
        duration: 2.5,
        fallbackBorderRadius: 8,
      }}
    >
      <Dashboard />
    </ShimmerProvider>
  );
}
```

--------------------------------

### Dashboard with Multiple Sections (Angular)

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/README.md

Shows how to implement multiple Shimmer components for distinct dashboard sections in Angular. Each component can have its own loading state and custom shimmer colors, managed via signals.

```typescript
@Component({
  template:
    `
    <!-- User profile section -->
    <shimmer [loading]="loadingUser()" [templateProps]="{ user: userTemplate }">
      <app-user-profile [user]="user()" />
    </shimmer>

    <!-- Stats section - with custom colors -->
    <shimmer
      [loading]="loadingStats()"
      [templateProps]="{ stats: statsTemplate }"
      shimmerColor="rgba(20, 184, 166, 0.2)"
    >
      <app-stats-grid [stats]="stats()" />
    </shimmer>
  `,
})
export class DashboardComponent {
  loadingUser = signal(true);
  loadingStats = signal(true);
  // ...
}
```

--------------------------------

### Display Recent Activity with Shimmer

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/examples/angular-example/src/app/app.component.html

Iterates through recent activity to display user, action, target, and time. Uses a fallback template.

```html
@for (act of activity() || activityTemplate; track act.id) {

**{{ act.user }}** {{ act.action }} {{ act.target }}

{{ act.time }}

}
```

--------------------------------

### Shimmer Component Props

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/README.md

Detailed reference for the props accepted by the Shimmer component across supported frameworks.

```APIDOC
## <Shimmer> Component Props

### Description
The Shimmer component wraps content to provide a loading skeleton effect. It measures the dimensions of its children and injects mock data via `templateProps` when in a loading state.

### Parameters
- **loading** (boolean) - Optional - Whether to show shimmer effect or actual content. Default: true
- **children** (React.ReactNode) - Required - The content to render/measure.
- **shimmerColor** (string) - Optional - Color of the shimmer wave. Default: 'rgba(255,255,255,0.15)'
- **backgroundColor** (string) - Optional - Background color of shimmer blocks. Default: 'rgba(255,255,255,0.08)'
- **duration** (number) - Optional - Animation duration in seconds. Default: 1.5
- **fallbackBorderRadius** (number) - Optional - Border radius (px) for elements with no CSS border-radius. Default: 4
- **templateProps** (Record<string, unknown>) - Optional - Props to inject into first child for skeleton rendering.
```

--------------------------------

### SolidJS Static Content Shimmer

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/vue/README.md

Use this snippet for static content in SolidJS applications. It wraps a component with a Shimmer effect based on a loading signal.

```tsx
import { createSignal } from 'solid-js';
import { Shimmer } from '@shimmer-from-structure/solid';

function UserCard() {
  const [isLoading, setIsLoading] = createSignal(true);

  return (
    <Shimmer loading={isLoading()}>
      <div class="card">
        <img src="avatar.jpg" class="avatar" />
        <h2>John Doe</h2>
        <p>Software Engineer</p>
      </div>
    </Shimmer>
  );
}
```

--------------------------------

### Display Stats with Shimmer

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/examples/angular-example/src/app/app.component.html

Iterates through stats to display label, value, and trend information. Includes a fallback template.

```html
@for (stat of stats() || statsTemplate; track stat.label) {

{{ stat.label }}

### {{ stat.value }}

{{ stat.trend === 'up' ? '↑' : '↓' }} {{ stat.change }}

}
```

--------------------------------

### Lint Code

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/CONTRIBUTING.md

Check code for style and potential errors using ESLint.

```bash
npm run lint
```

--------------------------------

### Svelte: Dynamic Content with templateProps

Source: https://github.com/darula-hpp/shimmer-from-structure/blob/main/packages/solid/README.md

Utilize templateProps in Svelte to provide mock data for skeleton rendering. The mock data is applied to the child component's props when loading.

```svelte
<script>
import { Shimmer } from '@shimmer-from-structure/svelte';
import UserCard from './UserCard.svelte';

let { user } = $props();
let loading = $state(true);

const userTemplate = {
  name: 'Loading...', 
  role: 'Loading role...', 
  avatar: 'placeholder.jpg',
};
</script>

<Shimmer loading={loading} templateProps={{ user: userTemplate }}>
  <UserCard user={user || userTemplate} />
</Shimmer>
```