danilowoz / danilowoz/react-content-loader

Animation stops working after first render when using React.StrictMode

Open
#339 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
14k
Forks
421
PR merge metrics
No merged PRs in 30d

Description

## What did you do?

I installed react-content-loader v 7.1.1 and used example loader animation from https://skeletonreact.com/ for React Native

```jsx
import React from "react"
import ContentLoader, { Rect, Circle, Path } from "react-content-loader/native"

const MyLoader = (props) => (








)

export default MyLoader

```

## What did you expect to happen?

The ContentLoader animation should continue to loop indefinitely, providing a smooth loading experience regardless of whether StrictMode is enabled.

## What happened actually?

When wrapping a React Native application with `React.StrictMode`, animations from `react-content-loader/native` execute only once during the initial render and then stop indefinitely. The animation does not restart or loop as expected.

Image

- **Without StrictMode**: Animation works correctly and loops continuously ✅
- **With StrictMode**: Animation plays once during initial render, then stops completely ❌

## Console Warning

The following warning appears in the console when using the ContentLoader in StrictMode:

```
findNodeHandle is deprecated in StrictMode. findNodeHandle was passed an instance of LinearGradient which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://react.dev/link/strict-mode-find-node
```

## Which versions of react-content-loader, and which browser are affected by this issue?

```jsx
"dependencies": {
"expo": "53.0.20",
"react": "19.0.0",
"react-content-loader": "^7.1.1",
"react-dom": "19.0.0",
"react-native": "0.79.5",
"react-native-svg": "15.11.2",
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@types/react": "~19.0.10",
"eslint": "^9.25.0",
"eslint-config-expo": "~9.2.0",
"patch-package": "^8.0.0",
"typescript": "~5.8.3"
},
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.