open-index/open-npm huggingface dataset:
npm package: @rime-ui/suspensible-image
Description: A React image component with smooth skeleton loading
Author: Ahmed Hany
Latest version: 0.0.14

# Suspensible Image

## Make Your Image Loading Smooth and Faster with a Clean Skeleton Loader

When working with images in React, it's important to provide a smooth loading experience for users. One effective way to do this is by using a **skeleton loader** while the image is being fetched. This approach improves user experience by avoiding blank spaces and providing a placeholder until the image is ready.

### Important Note:
- React 19 Required.
- No SSR Support.

### Key Benefits:
- **Skeleton Loading**: Provides visual feedback during image loading with an animated shimmer effect.
- **React 19 Suspense**: Uses React's latest Suspense API for handling asynchronous operations.
- **Built-in Caching**: Stores previously loaded images to avoid redundant network requests


### How to Use:

```tsx
import { Suspense } from "react";
import { SuspensibleImage, Skeleton } from "@rime-ui/suspensible-image";
import "@rime-ui/suspensible-image/dist/index.css";

function MyComponent() {
  return (
    <Suspense fallback={<Skeleton />}>
      <SuspensibleImage src="https://example.com/image.jpg" alt="Description" />
    </Suspense>
  );
}
```
npm package: @rimecms/field-url
Description: Field component for [rīme](https://github.com/bienbiendev/rime) CMS. Simple component that display the document URL.
Latest version: 0.2.3

# Field URL

Field component for [rīme](https://github.com/bienbiendev/rime) CMS.
Simple component that display the document URL.

```bash
npm i @rimecms/field-url
```

```ts
// +rime/rime.config.ts
import { Collection, rime } from '$rime/config'
import url from '@rimecms/field-url'
import { slug, text } from 'rimecms/fields'

const pages = Collection.create('pages', {
  $url: (doc) => `/${doc.slug}`
  fields: [
    text('title').isTitle(),
    slug('slug').slugify('title'),
    url(),
  ]
})

//...

export default rime({
  //...
  collections: [pages]
})
```
npm package: @rimecms/regenerate-images
Description: A [rime](https://github.com/bienbiendev/rime) cms plugin to regenerate upload collections images.
Latest version: 0.1.2

# @rimecms/regenerate-images

A [rime](https://github.com/bienbiendev/rime) cms plugin to regenerate upload collections images.

```bash
npm i @rimecms/regenerate-images
```