@octanejs/i18next 0.1.51 → 0.1.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/i18next",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -54,7 +54,7 @@
   },
   "peerDependencies": {
     "i18next": ">=26.2.0",
-    "octane": "^0.6.0"
+    "octane": "^0.8.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -65,7 +65,7 @@
     "react-dom": "19.2.7",
     "react-i18next": "17.0.9",
     "vitest": "^4.1.10",
-    "octane": "0.6.0"
+    "octane": "0.8.0"
   },
   "scripts": {
     "test": "vitest run"

package/src/useTranslation.js

@@ -277,9 +277,23 @@ export const useTranslation = (...args) => {
 		subSlot(slot, 'ut:result'),
 	);
 
+	// use() tracks thenables by call order, and a replay keeps the thenable
+	// already stored at a position. If this hook stopped calling use() once its
+	// namespaces loaded, the next use() in the component (a second
+	// useTranslation, or any other suspending read) would take this hook's
+	// position on the replay and receive this settled load instead of
+	// suspending on its own. Retain the load this call site suspended on and
+	// keep reading it after it settles. The key names what is being loaded, so
+	// settling never changes it.
+	const suspense = useMemo(
+		() => ({ promise: undefined }),
+		[i18n, props.lng, namespaces, useSuspense],
+		subSlot(slot, 'ut:suspense'),
+	);
 	if (i18n && useSuspense && !ready) {
-		use(getSuspenseLoadPromise(i18n, props.lng, namespaces));
+		suspense.promise = getSuspenseLoadPromise(i18n, props.lng, namespaces);
 	}
+	if (suspense.promise !== undefined) use(suspense.promise);
 
 	return ret;
 };