oihana-next-ui 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oihana-next-ui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "private": false,
   "description": "Oihana Next.js UI component library — reusable components, hooks and utilities built with React 19, Next.js, Tailwind CSS and DaisyUI",
   "author": {

package/src/@configs/index.js

@@ -5,7 +5,7 @@ import languages  from './languages'
 import navigation from './navigation'
 import ui         from './ui'
 
-import version from '@/version'
+import version from '../version'
 
 const config =
 {

package/src/@configs/navigation.js

@@ -1,6 +1,6 @@
 'use client'
 
-import { COLLAPSE , LINK /* , DIVIDER */ } from '@/contexts/navigation/types'
+import { COLLAPSE , LINK /* , DIVIDER */ } from '../contexts/navigation/types'
 
 import {
     MdOutlineSmartButton as ButtonIcon ,

package/src/@configs/ui/splashScreen.js

@@ -1,4 +1,4 @@
-import version from '@/version';
+import version from '../../version';
 
 const splashScreen =
 {

package/src/@locale/index.js

@@ -1,9 +1,9 @@
-import getLocaleFromI18n from '@/contexts/locale/helpers/getLocaleFromI18n' ;
+import getLocaleFromI18n from '../contexts/locale/helpers/getLocaleFromI18n' ;
 
 import 'dayjs/locale/fr' ;
 import 'dayjs/locale/en' ;
 
-import languages from '@/@configs/languages' ;
+import languages from '../@configs/languages' ;
 
 import app        from './app' ;
 import components from './components' ;

package/src/components/layouts/InfiniteScroll.jsx

@@ -2,11 +2,11 @@
 
 import { useRef } from 'react' ;
 
-import Loading from '@/components/Loading' ;
+import Loading from '../Loading' ;
 
-import useInfiniteScroll from '@/hooks/useInfiniteScroll' ;
+import useInfiniteScroll from '../../hooks/useInfiniteScroll' ;
 
-import cn from '@/themes/helpers/cn' ;
+import cn from '../../themes/helpers/cn' ;
 
 /**
  * Default root element type for the InfiniteScroll container.

package/src/demo/layouts/InfiniteScrollDemo.jsx

@@ -1,6 +1,6 @@
 'use client' ;
 
-import { useCallback , useEffect , useState } from 'react' ;
+import { useCallback , useEffect , useRef , useState } from 'react' ;
 
 import InfiniteScroll from '@/components/layouts/InfiniteScroll' ;
 import List           from '@/components/lists/List' ;
@@ -192,15 +192,20 @@ const ChatPanel = () =>
     const [ loading , setLoading ] = useState( false ) ;
     const [ hasMore , setHasMore ] = useState( true ) ;
 
+    // Synchronous re-entrancy guard : blocks double loads from React StrictMode's
+    // double-invoke and from IntersectionObserver bursts, before any await.
+    const loadingRef = useRef( false ) ;
+
     // --------- Prepend the previous (older) page of messages
 
     const loadOlder = useCallback( async () =>
     {
-        if ( loading || !hasMore )
+        if ( loadingRef.current || !hasMore )
         {
             return ;
         }
 
+        loadingRef.current = true ;
         setLoading( true ) ;
 
         await new Promise( resolve => setTimeout( resolve , LATENCY ) ) ;
@@ -212,8 +217,9 @@ const ChatPanel = () =>
         setLoaded( prev => [ ...older , ...prev ] ) ;
         setHasMore( start > 0 ) ;
         setLoading( false ) ;
+        loadingRef.current = false ;
     }
-    , [ hasMore , loaded.length , loading ] ) ;
+    , [ hasMore , loaded.length ] ) ;
 
     // --------- Initial load (most recent page)
 
@@ -255,15 +261,20 @@ const InfiniteScrollDemo = () =>
     const [ loading , setLoading ] = useState( false ) ;
     const [ hasMore , setHasMore ] = useState( true ) ;
 
+    // Synchronous re-entrancy guard : blocks double loads from React StrictMode's
+    // double-invoke and from IntersectionObserver bursts, before any await.
+    const loadingRef = useRef( false ) ;
+
     // --------- Append the next page, guarding against concurrent loads
 
     const loadMore = useCallback( async () =>
     {
-        if ( loading || !hasMore )
+        if ( loadingRef.current || !hasMore )
         {
             return ;
         }
 
+        loadingRef.current = true ;
         setLoading( true ) ;
 
         const { items : newItems , hasMore : more } = await fetchPage( page ) ;
@@ -272,8 +283,9 @@ const InfiniteScrollDemo = () =>
         setHasMore( more ) ;
         setPage( prev => prev + 1 ) ;
         setLoading( false ) ;
+        loadingRef.current = false ;
     }
-    , [ hasMore , loading , page ] ) ;
+    , [ hasMore , page ] ) ;
 
     // --------- Initial load
 

package/src/display/Application.jsx

@@ -21,11 +21,11 @@ import SplashScreen from './SplashScreen';
 
 import useVersionCheck from '../hooks/useVersionCheck'
 
-import config       from '@/@configs'
-import languages    from '@/@configs/languages'
-import locale       from '@/@locale'
-import navigation   from '@/@configs/navigation'
-import splashScreen from '@/@configs/ui/splashScreen' ;
+import config       from '../@configs'
+import languages    from '../@configs/languages'
+import locale       from '../@locale'
+import navigation   from '../@configs/navigation'
+import splashScreen from '../@configs/ui/splashScreen' ;
 
 const { defaultLang , version , versionCheck } = config ;
 

package/src/hooks/useInfiniteScroll.js

@@ -2,7 +2,7 @@
 
 import { useEffect , useRef } from 'react' ;
 
-import resolveRefElement from '@/helpers/react/resolveRefElement' ;
+import resolveRefElement from '../helpers/react/resolveRefElement' ;
 
 /**
  * Default distance, before the sentinel is reached, at which loading is triggered.
@@ -28,6 +28,12 @@ export const DEFAULT_THRESHOLD = 0 ;
  * Note : `onLoadMore` should be stable (wrap it in `useCallback`), otherwise
  * the observer is recreated on every render.
  *
+ * Note : `onLoadMore` should also be re-entrancy safe. Because the `loading`
+ * state is asynchronous, React StrictMode's double-invoke and observer bursts
+ * can call it again before `loading` flips — guard with a synchronous ref
+ * (`if ( loadingRef.current ) return ; loadingRef.current = true ;`) to avoid
+ * loading the same page twice (which yields duplicate React keys).
+ *
  * @param {Object} [options]
  * @param {boolean}  [options.hasMore=true]                  - Whether more items can be loaded.
  * @param {boolean}  [options.loading=false]                 - Pauses observation while a load is in flight.

package/src/version.js

@@ -1,3 +1,3 @@
-const version = "0.2.2" ;
+const version = "0.2.3" ;
 
 export default version ;