@archiva/archiva-nextjs 0.2.91 → 0.2.93

package/dist/react/client.js

@@ -370,23 +370,45 @@ function Timeline({
 }) {
   const { apiBaseUrl, getToken, forceRefreshToken } = useArchiva();
   const [allEvents, setAllEvents] = React2.useState([]);
+  const [previousEvents, setPreviousEvents] = React2.useState([]);
   const [cursor, setCursor] = React2.useState(void 0);
   const [loading, setLoading] = React2.useState(false);
   const [error, setError] = React2.useState(null);
   const [hasMore, setHasMore] = React2.useState(false);
   const [searchQuery, setSearchQuery] = React2.useState("");
+  const queryParamsRef = React2.useRef({});
+  const queryParamsKeyRef = React2.useRef("");
+  const queryParams = React2.useMemo(() => {
+    const params = {
+      entityId,
+      actorId,
+      entityType,
+      // Filter by actorType on API side
+      actorType: showSystemAndServices ? void 0 : "user",
+      limit: initialLimit
+    };
+    const key = JSON.stringify(params);
+    if (key !== queryParamsKeyRef.current) {
+      queryParamsKeyRef.current = key;
+      queryParamsRef.current = params;
+      return params;
+    }
+    return queryParamsRef.current;
+  }, [entityId, actorId, entityType, initialLimit, showSystemAndServices]);
+  const allEventsRef = React2.useRef([]);
+  React2.useEffect(() => {
+    allEventsRef.current = allEvents;
+  }, [allEvents]);
   const load = React2.useCallback(
     async (options) => {
       setLoading(true);
       setError(null);
+      if (options?.reset && allEventsRef.current.length > 0) {
+        setPreviousEvents(allEventsRef.current);
+      }
       try {
         const params = {
-          entityId,
-          actorId,
-          entityType,
-          // Filter by actorType on API side
-          actorType: showSystemAndServices ? void 0 : "user",
-          limit: initialLimit,
+          ...queryParams,
           cursor: options?.reset ? void 0 : options?.currentCursor ?? cursor
         };
         const response = await fetchEventsWithRetry(
@@ -395,34 +417,54 @@ function Timeline({
           forceRefreshToken,
           params
         );
-        setAllEvents((prev) => options?.reset ? response.items : [...prev, ...response.items]);
+        setAllEvents((prev) => {
+          const newEvents = options?.reset ? response.items : [...prev, ...response.items];
+          if (options?.reset) {
+            setPreviousEvents([]);
+          }
+          return newEvents;
+        });
         setCursor(response.nextCursor);
         setHasMore(Boolean(response.nextCursor));
       } catch (err) {
         setError(err.message);
+        setPreviousEvents((prev) => {
+          if (options?.reset && prev.length > 0) {
+            setAllEvents(prev);
+            return [];
+          }
+          return prev;
+        });
       } finally {
         setLoading(false);
       }
     },
-    [entityId, actorId, entityType, initialLimit, apiBaseUrl, getToken, forceRefreshToken, cursor, showSystemAndServices]
+    [queryParams, apiBaseUrl, getToken, forceRefreshToken, cursor]
   );
   React2.useEffect(() => {
     setCursor(void 0);
     setAllEvents([]);
+    setPreviousEvents([]);
     void load({ reset: true });
-  }, [entityId, actorId, entityType, showSystemAndServices]);
+  }, [entityId, actorId, entityType, showSystemAndServices, initialLimit]);
+  const eventsToFilter = React2.useMemo(() => {
+    if (loading && allEvents.length === 0 && previousEvents.length > 0) {
+      return previousEvents;
+    }
+    return allEvents;
+  }, [allEvents, loading, previousEvents]);
   const filteredEvents = React2.useMemo(() => {
-    return applyClientSideFilters(allEvents, searchQuery, showSystemAndServices);
-  }, [allEvents, searchQuery, showSystemAndServices]);
+    return applyClientSideFilters(eventsToFilter, searchQuery, showSystemAndServices);
+  }, [eventsToFilter, searchQuery, showSystemAndServices]);
   const timelineItems = React2.useMemo(() => {
     return filteredEvents.slice(0, 10).map(
       (event) => eventToTimelineItem(event, getActorAvatar)
     );
   }, [filteredEvents, getActorAvatar]);
-  if (loading && allEvents.length === 0) {
+  if (loading && allEvents.length === 0 && previousEvents.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: className || "", style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { padding: "3rem", textAlign: "center", color: "#6b7280" }, children: "Loading events..." }) });
   }
-  if (error) {
+  if (error && allEvents.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: className || "", style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { padding: "1rem", color: "#dc2626", backgroundColor: "#fef2f2", borderRadius: "0.375rem" }, children: [
       "Error: ",
       error
@@ -438,13 +480,17 @@ function Timeline({
         placeholder: "Search actions, entities, IDs, actors, sources..."
       }
     ) }),
-    searchQuery && filteredEvents.length !== allEvents.length && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "0.5rem", fontSize: "0.875rem", color: "#6b7280" }, children: [
+    (searchQuery || filteredEvents.length !== eventsToFilter.length) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "0.5rem", fontSize: "0.875rem", color: "#6b7280" }, children: [
       "Showing ",
       filteredEvents.length,
       " of ",
-      allEvents.length,
+      eventsToFilter.length,
       " events"
     ] }),
+    error && allEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "1rem", padding: "0.75rem", color: "#dc2626", backgroundColor: "#fef2f2", borderRadius: "0.375rem", fontSize: "0.875rem" }, children: [
+      "Error: ",
+      error
+    ] }),
     timelineItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { padding: "3rem", textAlign: "center", color: "#6b7280" }, children: searchQuery ? "No events match your search." : emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { position: "relative", width: "100%" }, children: timelineItems.map((item, index) => {
       const useActivityLayout = !!(item.actorDisplay || item.userName || item.userHandle);
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(

package/dist/react/client.mjs

@@ -325,23 +325,45 @@ function Timeline({
 }) {
   const { apiBaseUrl, getToken, forceRefreshToken } = useArchiva();
   const [allEvents, setAllEvents] = React.useState([]);
+  const [previousEvents, setPreviousEvents] = React.useState([]);
   const [cursor, setCursor] = React.useState(void 0);
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState(null);
   const [hasMore, setHasMore] = React.useState(false);
   const [searchQuery, setSearchQuery] = React.useState("");
+  const queryParamsRef = React.useRef({});
+  const queryParamsKeyRef = React.useRef("");
+  const queryParams = React.useMemo(() => {
+    const params = {
+      entityId,
+      actorId,
+      entityType,
+      // Filter by actorType on API side
+      actorType: showSystemAndServices ? void 0 : "user",
+      limit: initialLimit
+    };
+    const key = JSON.stringify(params);
+    if (key !== queryParamsKeyRef.current) {
+      queryParamsKeyRef.current = key;
+      queryParamsRef.current = params;
+      return params;
+    }
+    return queryParamsRef.current;
+  }, [entityId, actorId, entityType, initialLimit, showSystemAndServices]);
+  const allEventsRef = React.useRef([]);
+  React.useEffect(() => {
+    allEventsRef.current = allEvents;
+  }, [allEvents]);
   const load = React.useCallback(
     async (options) => {
       setLoading(true);
       setError(null);
+      if (options?.reset && allEventsRef.current.length > 0) {
+        setPreviousEvents(allEventsRef.current);
+      }
       try {
         const params = {
-          entityId,
-          actorId,
-          entityType,
-          // Filter by actorType on API side
-          actorType: showSystemAndServices ? void 0 : "user",
-          limit: initialLimit,
+          ...queryParams,
           cursor: options?.reset ? void 0 : options?.currentCursor ?? cursor
         };
         const response = await fetchEventsWithRetry(
@@ -350,34 +372,54 @@ function Timeline({
           forceRefreshToken,
           params
         );
-        setAllEvents((prev) => options?.reset ? response.items : [...prev, ...response.items]);
+        setAllEvents((prev) => {
+          const newEvents = options?.reset ? response.items : [...prev, ...response.items];
+          if (options?.reset) {
+            setPreviousEvents([]);
+          }
+          return newEvents;
+        });
         setCursor(response.nextCursor);
         setHasMore(Boolean(response.nextCursor));
       } catch (err) {
         setError(err.message);
+        setPreviousEvents((prev) => {
+          if (options?.reset && prev.length > 0) {
+            setAllEvents(prev);
+            return [];
+          }
+          return prev;
+        });
       } finally {
         setLoading(false);
       }
     },
-    [entityId, actorId, entityType, initialLimit, apiBaseUrl, getToken, forceRefreshToken, cursor, showSystemAndServices]
+    [queryParams, apiBaseUrl, getToken, forceRefreshToken, cursor]
   );
   React.useEffect(() => {
     setCursor(void 0);
     setAllEvents([]);
+    setPreviousEvents([]);
     void load({ reset: true });
-  }, [entityId, actorId, entityType, showSystemAndServices]);
+  }, [entityId, actorId, entityType, showSystemAndServices, initialLimit]);
+  const eventsToFilter = React.useMemo(() => {
+    if (loading && allEvents.length === 0 && previousEvents.length > 0) {
+      return previousEvents;
+    }
+    return allEvents;
+  }, [allEvents, loading, previousEvents]);
   const filteredEvents = React.useMemo(() => {
-    return applyClientSideFilters(allEvents, searchQuery, showSystemAndServices);
-  }, [allEvents, searchQuery, showSystemAndServices]);
+    return applyClientSideFilters(eventsToFilter, searchQuery, showSystemAndServices);
+  }, [eventsToFilter, searchQuery, showSystemAndServices]);
   const timelineItems = React.useMemo(() => {
     return filteredEvents.slice(0, 10).map(
       (event) => eventToTimelineItem(event, getActorAvatar)
     );
   }, [filteredEvents, getActorAvatar]);
-  if (loading && allEvents.length === 0) {
+  if (loading && allEvents.length === 0 && previousEvents.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: className || "", style: { width: "100%" }, children: /* @__PURE__ */ jsx("div", { style: { padding: "3rem", textAlign: "center", color: "#6b7280" }, children: "Loading events..." }) });
   }
-  if (error) {
+  if (error && allEvents.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: className || "", style: { width: "100%" }, children: /* @__PURE__ */ jsxs("div", { style: { padding: "1rem", color: "#dc2626", backgroundColor: "#fef2f2", borderRadius: "0.375rem" }, children: [
       "Error: ",
       error
@@ -393,13 +435,17 @@ function Timeline({
         placeholder: "Search actions, entities, IDs, actors, sources..."
       }
     ) }),
-    searchQuery && filteredEvents.length !== allEvents.length && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "0.5rem", fontSize: "0.875rem", color: "#6b7280" }, children: [
+    (searchQuery || filteredEvents.length !== eventsToFilter.length) && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "0.5rem", fontSize: "0.875rem", color: "#6b7280" }, children: [
       "Showing ",
       filteredEvents.length,
       " of ",
-      allEvents.length,
+      eventsToFilter.length,
       " events"
     ] }),
+    error && allEvents.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1rem", padding: "0.75rem", color: "#dc2626", backgroundColor: "#fef2f2", borderRadius: "0.375rem", fontSize: "0.875rem" }, children: [
+      "Error: ",
+      error
+    ] }),
     timelineItems.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: "3rem", textAlign: "center", color: "#6b7280" }, children: searchQuery ? "No events match your search." : emptyMessage }) : /* @__PURE__ */ jsx("div", { style: { position: "relative", width: "100%" }, children: timelineItems.map((item, index) => {
       const useActivityLayout = !!(item.actorDisplay || item.userName || item.userHandle);
       return /* @__PURE__ */ jsxs(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archiva/archiva-nextjs",
-  "version": "0.2.91",
+  "version": "0.2.93",
   "description": "Archiva Next.js SDK - Server Actions and Timeline Component",
   "main": "dist/index.js",
   "module": "dist/index.mjs",