strapi-plugin-oidc 1.7.6 → 1.8.1

package/dist/admin/{index-D2rlNx1-.js → index-Bmg4eTYb.js}

@@ -3,11 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const reactRouterDom = require("react-router-dom");
 const admin = require("@strapi/strapi/admin");
-const react = require("react");
+const React = require("react");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const reactIntl = require("react-intl");
-const index = require("./index-CrnGXADu.js");
+const index = require("./index-Dk6TYtio.js");
 const styled = require("styled-components");
 const lucideReact = require("lucide-react");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -125,8 +125,8 @@ function TagChip({ label, onRemove }) {
   ] });
 }
 function useTagState({ value, onChange }) {
-  const [inputValue, setInputValue] = react.useState("");
-  const inputRef = react.useRef(null);
+  const [inputValue, setInputValue] = React.useState("");
+  const inputRef = React.useRef(null);
   const addTag = (tag, predicate) => {
     const trimmed = tag.trim();
     if (trimmed && !value.includes(trimmed) && (!predicate || predicate(trimmed))) {
@@ -261,11 +261,11 @@ function ComboboxTagInput({ value, onChange, placeholder, startIcon, options })
     value,
     onChange
   });
-  const [showDropdown, setShowDropdown] = react.useState(false);
-  const [activeIndex, setActiveIndex] = react.useState(-1);
-  const wrapperRef = react.useRef(null);
-  const listboxId = react.useId();
-  const optionIdPrefix = react.useId();
+  const [showDropdown, setShowDropdown] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const wrapperRef = React.useRef(null);
+  const listboxId = React.useId();
+  const optionIdPrefix = React.useId();
   const filteredOptions = options.filter(
     (opt) => !value.includes(opt) && opt.toLowerCase().includes(inputValue.toLowerCase())
   );
@@ -333,7 +333,7 @@ function ComboboxTagInput({ value, onChange, placeholder, startIcon, options })
     setShowDropdown(true);
     setActiveIndex(-1);
   };
-  react.useEffect(() => {
+  React.useEffect(() => {
     const handleClickOutside = (e) => {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
         setShowDropdown(false);
@@ -546,13 +546,13 @@ const DAY_NAMES = Array.from(
 );
 function TagDateInput({ value = [], onChange, placeholder, startIcon }) {
   const { formatMessage } = reactIntl.useIntl();
-  const [isOpen, setIsOpen] = react.useState(false);
-  const [viewDate, setViewDate] = react.useState(() => /* @__PURE__ */ new Date());
-  const [pendingDates, setPendingDates] = react.useState([]);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [viewDate, setViewDate] = React.useState(() => /* @__PURE__ */ new Date());
+  const [pendingDates, setPendingDates] = React.useState([]);
   const today = /* @__PURE__ */ new Date();
-  const wrapperRef = react.useRef(null);
-  const dialogId = react.useId();
-  const dialogLabelId = react.useId();
+  const wrapperRef = React.useRef(null);
+  const dialogId = React.useId();
+  const dialogLabelId = React.useId();
   const year = viewDate.getFullYear();
   const month = viewDate.getMonth();
   const daysInMonth = getDaysInMonth(year, month);
@@ -594,7 +594,7 @@ function TagDateInput({ value = [], onChange, placeholder, startIcon }) {
   const removeTag = (indexToRemove) => {
     onChange(value.filter((_, i) => i !== indexToRemove));
   };
-  react.useEffect(() => {
+  React.useEffect(() => {
     const handleClickOutside = (e) => {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -863,14 +863,14 @@ function Whitelist({
   onImport,
   onExport
 }) {
-  const [email, setEmail] = react.useState("");
-  const [page, setPage] = react.useState(1);
+  const [email, setEmail] = React.useState("");
+  const [page, setPage] = React.useState(1);
   const { formatMessage } = reactIntl.useIntl();
   const { toggleNotification } = admin.useNotification();
-  const fileInputRef = react.useRef(null);
+  const fileInputRef = React.useRef(null);
   const pageCount = Math.ceil(users.length / PAGE_SIZE$1) || 1;
   const paginatedUsers = users.slice((page - 1) * PAGE_SIZE$1, page * PAGE_SIZE$1);
-  const onSaveEmail = react.useCallback(() => {
+  const onSaveEmail = React.useCallback(() => {
     const emailText = email.trim();
     if (users.some((user) => user.email === emailText)) {
       toggleNotification({
@@ -882,7 +882,7 @@ function Whitelist({
       setEmail("");
     }
   }, [email, users, onSave, formatMessage, toggleNotification]);
-  const handleImport = react.useCallback(
+  const handleImport = React.useCallback(
     async (e) => {
       const file = e.target.files?.[0];
       if (!fileInputRef.current || !file) return;
@@ -1018,7 +1018,7 @@ function Whitelist({
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("whitelist.table.created")) }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { style: { paddingRight: 0 }, children: " " })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: users.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tr, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { colSpan: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatMessage(index.getTrad("whitelist.table.empty")) }) }) }) }) : paginatedUsers.map((user, index$1) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: users.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tr, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { colSpan: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "80px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatMessage(index.getTrad("whitelist.table.empty")) }) }) }) }) : paginatedUsers.map((user, index$1) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: index$1 + 1 + (page - 1) * PAGE_SIZE$1 }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: user.email }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(LocalizedDate, { date: user.createdAt, options: { second: "2-digit" } }) }),
@@ -3615,11 +3615,14 @@ const AUDIT_ACTIONS = [
   "nonce_mismatch",
   "token_exchange_failed",
   "whitelist_rejected",
+  "email_not_verified",
+  "id_token_invalid",
   "logout",
   "session_expired",
   "user_created"
 ];
 const PAGE_SIZE = 10;
+const MIN_SPINNER_MS = 400;
 const DETAILS_TEXT_STYLE = {
   display: "block",
   overflow: "hidden",
@@ -3650,8 +3653,8 @@ function buildQueryString(params) {
   );
 }
 function useDebounced(value, delay = 300) {
-  const [debounced, setDebounced] = react.useState(value);
-  react.useEffect(() => {
+  const [debounced, setDebounced] = React.useState(value);
+  React.useEffect(() => {
     const id = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(id);
   }, [value, delay]);
@@ -3661,40 +3664,47 @@ function AuditLog({ title } = {}) {
   const { formatMessage } = reactIntl.useIntl();
   const { get: get2, del } = admin.useFetchClient();
   const { toggleNotification } = admin.useNotification();
-  const [records, setRecords] = react.useState([]);
-  const [pagination, setPagination] = react.useState({
+  const [records, setRecords] = React.useState([]);
+  const [pagination, setPagination] = React.useState({
     page: 1,
     pageSize: PAGE_SIZE,
     total: 0,
     pageCount: 1
   });
-  const [page, setPage] = react.useState(1);
-  const [loading, setLoading] = react.useState(false);
-  const [filters, setFilters] = react.useState({});
+  const [page, setPage] = React.useState(1);
+  const [loading, setLoading] = React.useState(true);
+  const [filters, setFilters] = React.useState({});
+  const fetchGenRef = React.useRef(0);
   const debouncedFilters = useDebounced(filters);
-  const fetchLogs = react.useCallback(
+  const fetchLogs = React.useCallback(
     async (p, f) => {
+      const gen = ++fetchGenRef.current;
       setLoading(true);
+      const startTime = Date.now();
+      let newRecords = [];
+      let newPagination = { page: p, pageSize: PAGE_SIZE, total: 0, pageCount: 1 };
       try {
-        const queryString = buildQueryString({
-          filters: f,
-          page: p,
-          pageSize: PAGE_SIZE
-        });
+        const queryString = buildQueryString({ filters: f, page: p, pageSize: PAGE_SIZE });
         const response = await get2(`/strapi-plugin-oidc/audit-logs?${queryString}`);
-        setRecords(response.data.results ?? []);
-        setPagination(
-          response.data.pagination ?? { page: p, pageSize: PAGE_SIZE, total: 0, pageCount: 1 }
-        );
+        newRecords = response.data.results ?? [];
+        newPagination = response.data.pagination ?? {
+          page: p,
+          pageSize: PAGE_SIZE,
+          total: 0,
+          pageCount: 1
+        };
       } catch {
-        setRecords([]);
-      } finally {
-        setLoading(false);
       }
+      const remaining = MIN_SPINNER_MS - (Date.now() - startTime);
+      if (remaining > 0) await new Promise((r) => setTimeout(r, remaining));
+      if (gen !== fetchGenRef.current) return;
+      setRecords(newRecords);
+      setPagination(newPagination);
+      setLoading(false);
     },
     [get2]
   );
-  react.useEffect(() => {
+  React.useEffect(() => {
     fetchLogs(page, debouncedFilters);
   }, [fetchLogs, page, debouncedFilters]);
   const handleClearAll = async () => {
@@ -3867,37 +3877,54 @@ function AuditLog({ title } = {}) {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(CustomTable, { colCount: 5, rowCount: records.length, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.timestamp")) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.action")) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.email")) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.ip")) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.details")) })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tbody, { children: [
-        loading && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tr, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { colSpan: 5, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatMessage(index.getTrad("auditlog.loading")) }) }) }) }),
-        !loading && records.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tr, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { colSpan: 5, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: hasActiveFilters ? formatMessage(index.getTrad("auditlog.filters.empty")) : formatMessage(index.getTrad("auditlog.table.empty")) }) }) }) }),
-        !loading && records.map((record) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: /* @__PURE__ */ jsxRuntime.jsx(LocalizedDate, { date: record.createdAt, options: { second: "2-digit" } }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: record.action }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: formatMessage(index.getTrad(`auditlog.action.${record.action}`)), children: /* @__PURE__ */ jsxRuntime.jsx(
-              icons.Information,
-              {
-                "aria-hidden": true,
-                style: { cursor: "help" },
-                width: "1.4rem",
-                height: "1.4rem",
-                fill: "primary600"
-              }
-            ) })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: record.email ?? "—" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: record.ip ?? "—" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { style: { maxWidth: "200px" }, children: record.details ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: record.details, side: "top", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: DETAILS_TEXT_STYLE, children: record.details }) }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "—" }) })
-        ] }, record.id))
-      ] })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(CustomTable, { colCount: 5, rowCount: records.length, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.timestamp")) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.action")) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.email")) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.ip")) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.details")) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tbody, { children: [
+          records.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tr, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { colSpan: 5, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "80px" }, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { small: true }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: hasActiveFilters ? formatMessage(index.getTrad("auditlog.filters.empty")) : formatMessage(index.getTrad("auditlog.table.empty")) }) }) }) }),
+          records.map((record) => /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.Tr,
+            {
+              style: { opacity: loading ? 0.4 : 1, transition: "opacity 0.15s" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: /* @__PURE__ */ jsxRuntime.jsx(LocalizedDate, { date: record.createdAt, options: { second: "2-digit" } }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: record.action }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: formatMessage(index.getTrad(`auditlog.action.${record.action}`)), children: /* @__PURE__ */ jsxRuntime.jsx(
+                    icons.Information,
+                    {
+                      "aria-hidden": true,
+                      style: { cursor: "help" },
+                      width: "1.4rem",
+                      height: "1.4rem",
+                      fill: "primary600"
+                    }
+                  ) })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: record.email ?? "—" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: record.ip ?? "—" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { style: { maxWidth: "200px" }, children: record.details ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: record.details, side: "top", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: DETAILS_TEXT_STYLE, children: record.details }) }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "—" }) })
+              ]
+            },
+            record.id
+          ))
+        ] })
+      ] }),
+      loading && records.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Flex,
+        {
+          justifyContent: "center",
+          alignItems: "center",
+          style: { position: "absolute", inset: 0, pointerEvents: "none" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { small: true })
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       TablePagination,
@@ -4171,8 +4198,8 @@ function isDirtyArray(a, b) {
 }
 function useOidcSettings() {
   const { get: get2, put, post } = admin.useFetchClient();
-  const [state, dispatch] = react.useReducer(reducer, initialState);
-  react.useEffect(() => {
+  const [state, dispatch] = React.useReducer(reducer, initialState);
+  React.useEffect(() => {
     get2(`/strapi-plugin-oidc/oidc-roles`).then((response) => {
       dispatch({ type: "hydrate/oidcRoles", oidcRoles: response.data });
     });
@@ -4193,19 +4220,19 @@ function useOidcSettings() {
       });
     });
   }, [get2]);
-  const onChangeRole = react.useCallback((values, oidcId) => {
+  const onChangeRole = React.useCallback((values, oidcId) => {
     dispatch({ type: "patch/oidcRole", oidcId, values });
   }, []);
-  const onRegisterWhitelist = react.useCallback((email) => {
+  const onRegisterWhitelist = React.useCallback((email) => {
     dispatch({ type: "user/add", email });
   }, []);
-  const onDeleteWhitelist = react.useCallback((email) => {
+  const onDeleteWhitelist = React.useCallback((email) => {
     dispatch({ type: "user/delete", email });
   }, []);
-  const onDeleteAll = react.useCallback(() => {
+  const onDeleteAll = React.useCallback(() => {
     dispatch({ type: "users/clear" });
   }, []);
-  const onImport = react.useCallback(
+  const onImport = React.useCallback(
     async (emails) => {
       const response = await post("/strapi-plugin-oidc/whitelist/import", {
         users: emails.map((e) => ({ email: e }))
@@ -4217,22 +4244,22 @@ function useOidcSettings() {
     },
     [post, get2]
   );
-  const onExport = react.useCallback(async () => {
+  const onExport = React.useCallback(async () => {
     const response = await get2("/strapi-plugin-oidc/whitelist/export");
     const data = response.data;
     downloadJson("strapi-oidc-whitelist", data);
   }, [get2]);
-  const onToggleWhitelist = react.useCallback((e) => {
+  const onToggleWhitelist = React.useCallback((e) => {
     dispatch({ type: "toggle/useWhitelist", value: e.target.checked });
   }, []);
-  const onToggleEnforce = react.useCallback((e) => {
+  const onToggleEnforce = React.useCallback((e) => {
     dispatch({ type: "toggle/enforceOIDC", value: e.target.checked });
   }, []);
-  const isDirty = react.useMemo(
+  const isDirty = React.useMemo(
     () => isDirtyPrimitive(state.current.useWhitelist, state.initial.useWhitelist) || isDirtyPrimitive(state.current.enforceOIDC, state.initial.enforceOIDC) || isDirtyArray(state.current.oidcRoles, state.initial.oidcRoles) || isDirtyArray(state.current.users, state.initial.users),
     [state.current, state.initial]
   );
-  const onSaveAll = react.useCallback(async () => {
+  const onSaveAll = React.useCallback(async () => {
     dispatch({ type: "loading", value: true });
     try {
       await Promise.all([
@@ -4407,7 +4434,7 @@ function HomePage$1() {
     ] }) })
   ] });
 }
-const HomePage = react.memo(HomePage$1);
+const HomePage = React.memo(HomePage$1);
 function App() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: /* @__PURE__ */ jsxRuntime.jsx(HomePage, {}) }),

package/dist/admin/{index-pieFAsgM.mjs → index-BqWd-Iiq.mjs}

@@ -2,10 +2,10 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useBlocker, Routes, Route } from "react-router-dom";
 import { useNotification, useFetchClient, Page, Layouts } from "@strapi/strapi/admin";
 import { useState, useRef, useId, useEffect, useCallback, useReducer, useMemo, memo } from "react";
-import { Typography, Flex, Box, MultiSelect, MultiSelectOption, Button, Dialog, Table, Pagination, PreviousLink, NextLink, PageLink, Field, Divider, Thead, Tr, Th, Tbody, Td, IconButton, Tooltip, Alert } from "@strapi/design-system";
+import { Typography, Flex, Box, MultiSelect, MultiSelectOption, Button, Dialog, Table, Pagination, PreviousLink, NextLink, PageLink, Field, Divider, Thead, Tr, Th, Tbody, Td, IconButton, Loader, Tooltip, Alert } from "@strapi/design-system";
 import { Cross, WarningCircle, Plus, Download, Upload, Trash, Calendar, Mail, Information } from "@strapi/icons";
 import { useIntl } from "react-intl";
-import { g as getTrad } from "./index-DRJ6Ty2J.mjs";
+import { g as getTrad } from "./index-Bb9-aYb4.mjs";
 import styled from "styled-components";
 import { Filter, ClipboardList, Server } from "lucide-react";
 function Role({ oidcRoles, roles, onChangeRole }) {
@@ -1014,7 +1014,7 @@ function Whitelist({
           /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("whitelist.table.created")) }),
           /* @__PURE__ */ jsx(Th, { style: { paddingRight: 0 }, children: " " })
         ] }) }),
-        /* @__PURE__ */ jsx(Tbody, { children: users.length === 0 ? /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 4, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: formatMessage(getTrad("whitelist.table.empty")) }) }) }) }) : paginatedUsers.map((user, index) => /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Tbody, { children: users.length === 0 ? /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 4, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "80px" }, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: formatMessage(getTrad("whitelist.table.empty")) }) }) }) }) : paginatedUsers.map((user, index) => /* @__PURE__ */ jsxs(Tr, { children: [
           /* @__PURE__ */ jsx(Td, { children: index + 1 + (page - 1) * PAGE_SIZE$1 }),
           /* @__PURE__ */ jsx(Td, { children: user.email }),
           /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(LocalizedDate, { date: user.createdAt, options: { second: "2-digit" } }) }),
@@ -3611,11 +3611,14 @@ const AUDIT_ACTIONS = [
   "nonce_mismatch",
   "token_exchange_failed",
   "whitelist_rejected",
+  "email_not_verified",
+  "id_token_invalid",
   "logout",
   "session_expired",
   "user_created"
 ];
 const PAGE_SIZE = 10;
+const MIN_SPINNER_MS = 400;
 const DETAILS_TEXT_STYLE = {
   display: "block",
   overflow: "hidden",
@@ -3665,28 +3668,35 @@ function AuditLog({ title } = {}) {
     pageCount: 1
   });
   const [page, setPage] = useState(1);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [filters, setFilters] = useState({});
+  const fetchGenRef = useRef(0);
   const debouncedFilters = useDebounced(filters);
   const fetchLogs = useCallback(
     async (p, f) => {
+      const gen = ++fetchGenRef.current;
       setLoading(true);
+      const startTime = Date.now();
+      let newRecords = [];
+      let newPagination = { page: p, pageSize: PAGE_SIZE, total: 0, pageCount: 1 };
       try {
-        const queryString = buildQueryString({
-          filters: f,
-          page: p,
-          pageSize: PAGE_SIZE
-        });
+        const queryString = buildQueryString({ filters: f, page: p, pageSize: PAGE_SIZE });
         const response = await get2(`/strapi-plugin-oidc/audit-logs?${queryString}`);
-        setRecords(response.data.results ?? []);
-        setPagination(
-          response.data.pagination ?? { page: p, pageSize: PAGE_SIZE, total: 0, pageCount: 1 }
-        );
+        newRecords = response.data.results ?? [];
+        newPagination = response.data.pagination ?? {
+          page: p,
+          pageSize: PAGE_SIZE,
+          total: 0,
+          pageCount: 1
+        };
       } catch {
-        setRecords([]);
-      } finally {
-        setLoading(false);
       }
+      const remaining = MIN_SPINNER_MS - (Date.now() - startTime);
+      if (remaining > 0) await new Promise((r) => setTimeout(r, remaining));
+      if (gen !== fetchGenRef.current) return;
+      setRecords(newRecords);
+      setPagination(newPagination);
+      setLoading(false);
     },
     [get2]
   );
@@ -3863,37 +3873,54 @@ function AuditLog({ title } = {}) {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(CustomTable, { colCount: 5, rowCount: records.length, children: [
-      /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
-        /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.timestamp")) }),
-        /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.action")) }),
-        /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.email")) }),
-        /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.ip")) }),
-        /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.details")) })
-      ] }) }),
-      /* @__PURE__ */ jsxs(Tbody, { children: [
-        loading && /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 5, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: formatMessage(getTrad("auditlog.loading")) }) }) }) }),
-        !loading && records.length === 0 && /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 5, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: hasActiveFilters ? formatMessage(getTrad("auditlog.filters.empty")) : formatMessage(getTrad("auditlog.table.empty")) }) }) }) }),
-        !loading && records.map((record) => /* @__PURE__ */ jsxs(Tr, { children: [
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: /* @__PURE__ */ jsx(LocalizedDate, { date: record.createdAt, options: { second: "2-digit" } }) }) }),
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "omega", children: record.action }),
-            /* @__PURE__ */ jsx(Tooltip, { label: formatMessage(getTrad(`auditlog.action.${record.action}`)), children: /* @__PURE__ */ jsx(
-              Information,
-              {
-                "aria-hidden": true,
-                style: { cursor: "help" },
-                width: "1.4rem",
-                height: "1.4rem",
-                fill: "primary600"
-              }
-            ) })
-          ] }) }),
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: record.email ?? "—" }) }),
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: record.ip ?? "—" }) }),
-          /* @__PURE__ */ jsx(Td, { style: { maxWidth: "200px" }, children: record.details ? /* @__PURE__ */ jsx(Tooltip, { label: record.details, side: "top", children: /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: DETAILS_TEXT_STYLE, children: record.details }) }) : /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: "—" }) })
-        ] }, record.id))
-      ] })
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+      /* @__PURE__ */ jsxs(CustomTable, { colCount: 5, rowCount: records.length, children: [
+        /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+          /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.timestamp")) }),
+          /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.action")) }),
+          /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.email")) }),
+          /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.ip")) }),
+          /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.details")) })
+        ] }) }),
+        /* @__PURE__ */ jsxs(Tbody, { children: [
+          records.length === 0 && /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 5, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "80px" }, children: loading ? /* @__PURE__ */ jsx(Loader, { small: true }) : /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: hasActiveFilters ? formatMessage(getTrad("auditlog.filters.empty")) : formatMessage(getTrad("auditlog.table.empty")) }) }) }) }),
+          records.map((record) => /* @__PURE__ */ jsxs(
+            Tr,
+            {
+              style: { opacity: loading ? 0.4 : 1, transition: "opacity 0.15s" },
+              children: [
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: /* @__PURE__ */ jsx(LocalizedDate, { date: record.createdAt, options: { second: "2-digit" } }) }) }),
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "omega", children: record.action }),
+                  /* @__PURE__ */ jsx(Tooltip, { label: formatMessage(getTrad(`auditlog.action.${record.action}`)), children: /* @__PURE__ */ jsx(
+                    Information,
+                    {
+                      "aria-hidden": true,
+                      style: { cursor: "help" },
+                      width: "1.4rem",
+                      height: "1.4rem",
+                      fill: "primary600"
+                    }
+                  ) })
+                ] }) }),
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: record.email ?? "—" }) }),
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: record.ip ?? "—" }) }),
+                /* @__PURE__ */ jsx(Td, { style: { maxWidth: "200px" }, children: record.details ? /* @__PURE__ */ jsx(Tooltip, { label: record.details, side: "top", children: /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: DETAILS_TEXT_STYLE, children: record.details }) }) : /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: "—" }) })
+              ]
+            },
+            record.id
+          ))
+        ] })
+      ] }),
+      loading && records.length > 0 && /* @__PURE__ */ jsx(
+        Flex,
+        {
+          justifyContent: "center",
+          alignItems: "center",
+          style: { position: "absolute", inset: 0, pointerEvents: "none" },
+          children: /* @__PURE__ */ jsx(Loader, { small: true })
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx(
       TablePagination,