tinacms 0.66.2 → 0.66.5

package/dist/index.es.js

@@ -40,7 +40,7 @@ import * as yup from "yup";
 import { setEditing, TinaDataContext, useEditState } from "@tinacms/sharedctx";
 import { getIn, setIn } from "final-form";
 import UrlPattern from "url-pattern";
-import { NavLink, useParams, useNavigate, Link, BrowserRouter, Routes, Route } from "react-router-dom";
+import { NavLink, useNavigate, useParams, Link, BrowserRouter, Routes, Route } from "react-router-dom";
 import { Menu, Transition } from "@headlessui/react";
 function popupWindow(url, title, window2, w, h) {
   const y = window2.top.outerHeight / 2 + window2.top.screenY - h / 2;
@@ -519,7 +519,7 @@ mutation addPendingDocumentMutation(
   async getRefreshedToken(tokens) {
     const { access_token, id_token, refresh_token } = JSON.parse(tokens);
     const { exp, iss, client_id } = this.parseJwt(access_token);
-    if (Date.now() / 1e3 >= exp) {
+    if (Date.now() / 1e3 >= exp - 120) {
       const refreshResponse = await fetch(iss, {
         method: "POST",
         headers: {
@@ -877,6 +877,9 @@ const TinaCloudProvider = (props) => {
   if (!cms.api.tina) {
     cms.registerApi("tina", createClient(props));
   }
+  if (!cms.api.admin) {
+    cms.registerApi("admin", new TinaAdminApi(cms));
+  }
   const setupMedia = async () => {
     var _a;
     if (props.mediaStore) {
@@ -901,11 +904,6 @@ const TinaCloudProvider = (props) => {
     return newBranch;
   };
   setupMedia();
-  React.useMemo(() => {
-    if (cms.flags.get("tina-admin") === true) {
-      cms.registerApi("admin", new TinaAdminApi(cms));
-    }
-  }, [cms, cms.flags.get("tina-admin")]);
   const [branchingEnabled, setBranchingEnabled] = React.useState(() => cms.flags.get("branch-switcher"));
   React.useEffect(() => {
     cms.events.subscribe("flag:set", ({ key, value }) => {
@@ -2112,6 +2110,10 @@ Document
 	height: 20px !important;
 }
 
+.tina-tailwind .h-12 {
+	height: 48px !important;
+}
+
 .tina-tailwind .w-full {
 	width: 100% !important;
 }
@@ -2132,10 +2134,6 @@ Document
 	width: 224px !important;
 }
 
-.tina-tailwind .w-0 {
-	width: 0px !important;
-}
-
 .tina-tailwind .w-6 {
 	width: 24px !important;
 }
@@ -2160,6 +2158,14 @@ Document
 	flex: 1 1 0% !important;
 }
 
+.tina-tailwind .flex-shrink-0 {
+	flex-shrink: 0 !important;
+}
+
+.tina-tailwind .flex-grow-0 {
+	flex-grow: 0 !important;
+}
+
 .tina-tailwind .table-auto {
 	table-layout: auto !important;
 }
@@ -2199,6 +2205,10 @@ Document
 	transform: var(--tw-transform) !important;
 }
 
+.tina-tailwind .cursor-pointer {
+	cursor: pointer !important;
+}
+
 .tina-tailwind .flex-col {
 	flex-direction: column !important;
 }
@@ -2215,6 +2225,10 @@ Document
 	align-items: stretch !important;
 }
 
+.tina-tailwind .justify-end {
+	justify-content: flex-end !important;
+}
+
 .tina-tailwind .justify-center {
 	justify-content: center !important;
 }
@@ -2282,10 +2296,6 @@ Document
 	border-color: rgba(225, 221, 236, var(--tw-border-opacity)) !important;
 }
 
-.tina-tailwind .border-transparent {
-	border-color: transparent !important;
-}
-
 .tina-tailwind .bg-white {
 	--tw-bg-opacity: 1 !important;
 	background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
@@ -2369,9 +2379,8 @@ Document
 	padding-bottom: 12px !important;
 }
 
-.tina-tailwind .px-8 {
-	padding-left: 32px !important;
-	padding-right: 32px !important;
+.tina-tailwind .pt-4 {
+	padding-top: 16px !important;
 }
 
 .tina-tailwind .pb-4 {
@@ -2448,10 +2457,6 @@ Document
 	line-height: 20px !important;
 }
 
-.tina-tailwind .leading-4 {
-	line-height: 16px !important;
-}
-
 .tina-tailwind .tracking-wide {
 	letter-spacing: 0.025em !important;
 }
@@ -2553,11 +2558,6 @@ Document
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 }
 
-.tina-tailwind .shadow-sm {
-	--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
-	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
-}
-
 .tina-tailwind .ring-1 {
 	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
 	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
@@ -2652,11 +2652,6 @@ Document
 	background-color: rgba(5, 116, 228, var(--tw-bg-opacity)) !important;
 }
 
-.hover\\:bg-gray-50:hover {
-	--tw-bg-opacity: 1 !important;
-	background-color: rgba(246, 246, 249, var(--tw-bg-opacity)) !important;
-}
-
 .hover\\:text-blue-600:hover {
 	--tw-text-opacity: 1 !important;
 	color: rgba(5, 116, 228, var(--tw-text-opacity)) !important;
@@ -2671,10 +2666,6 @@ Document
 	opacity: 1 !important;
 }
 
-.hover\\:opacity-80:hover {
-	opacity: .8 !important;
-}
-
 .focus\\:text-blue-400:focus {
 	--tw-text-opacity: 1 !important;
 	color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
@@ -3161,41 +3152,29 @@ function ImFilesEmpty(props) {
 }
 const useGetCollections = (cms) => {
   const api = new TinaAdminApi(cms);
-  const [info, setInfo] = useState({ collections: [], loading: true, error: false });
+  const [collections, setCollections] = useState([]);
+  const [loading, setLoading] = useState(true);
   useEffect(() => {
     const fetchCollections = async () => {
       const response = await api.fetchCollections();
-      setInfo({
-        collections: response.getCollections,
-        loading: false,
-        error: false
-      });
+      setCollections(response.getCollections);
+      setLoading(false);
     };
+    setLoading(true);
     fetchCollections();
   }, [cms]);
-  return info;
-};
-const GetCollections = ({ cms, children }) => {
-  const { collections, loading, error } = useGetCollections(cms);
-  if (!collections)
-    return null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collections, loading, error));
+  return { collections, loading };
 };
 const slugify = (text) => {
   return text.toString().toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "_").replace(/^-+|-+$/g, "");
 };
 const Sidebar = ({ cms }) => {
+  const collectionsInfo = useGetCollections(cms);
   const screens = cms.plugins.getType("screen").all();
-  return /* @__PURE__ */ React.createElement(GetCollections, {
-    cms
-  }, (collections, loading, error) => /* @__PURE__ */ React.createElement(Nav, {
+  return /* @__PURE__ */ React.createElement(Nav, {
     sidebarWidth: 360,
     showCollections: true,
-    collectionsInfo: {
-      collections,
-      loading,
-      error
-    },
+    collectionsInfo,
     screens,
     contentCreators: [],
     RenderNavSite: ({ view }) => /* @__PURE__ */ React.createElement(SidebarLink, {
@@ -3208,7 +3187,7 @@ const Sidebar = ({ cms }) => {
       to: `collections/${collection.name}`,
       Icon: ImFilesEmpty
     })
-  }));
+  });
 };
 const SidebarLink = (props) => {
   const { to, label, Icon } = props;
@@ -3232,9 +3211,6 @@ const GetCMS = ({ children }) => {
 function BiEdit(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m7 17.013 4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z" } }, { "tag": "path", "attr": { "d": "M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z" } }] })(props);
 }
-function BiExit(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19.002 3h-14c-1.103 0-2 .897-2 2v4h2V5h14v14h-14v-4h-2v4c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.898-2-2-2z" } }, { "tag": "path", "attr": { "d": "m11 16 5-4-5-4v3.001H3v2h8z" } }] })(props);
-}
 function BiLogIn(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 16 5-4-5-4v3H4v2h9z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
 }
@@ -3268,8 +3244,8 @@ const AuthTemplate = ({
     d: "M18.6466 14.5553C19.9018 13.5141 20.458 7.36086 21.0014 5.14903C21.5447 2.9372 23.7919 3.04938 23.7919 3.04938C23.7919 3.04938 23.2085 4.06764 23.4464 4.82751C23.6844 5.58738 25.3145 6.26662 25.3145 6.26662L24.9629 7.19622C24.9629 7.19622 24.2288 7.10204 23.7919 7.9785C23.355 8.85496 24.3392 17.4442 24.3392 17.4442C24.3392 17.4442 21.4469 22.7275 21.4469 24.9206C21.4469 27.1136 22.4819 28.9515 22.4819 28.9515H21.0296C21.0296 28.9515 18.899 26.4086 18.462 25.1378C18.0251 23.8669 18.1998 22.596 18.1998 22.596C18.1998 22.596 15.8839 22.4646 13.8303 22.596C11.7767 22.7275 10.4072 24.498 10.16 25.4884C9.91287 26.4787 9.81048 28.9515 9.81048 28.9515H8.66211C7.96315 26.7882 7.40803 26.0129 7.70918 24.9206C8.54334 21.8949 8.37949 20.1788 8.18635 19.4145C7.99321 18.6501 6.68552 17.983 6.68552 17.983C7.32609 16.6741 7.97996 16.0452 10.7926 15.9796C13.6052 15.914 17.3915 15.5965 18.6466 14.5553Z"
   }), /* @__PURE__ */ React.createElement("path", {
     d: "M11.1268 24.7939C11.1268 24.7939 11.4236 27.5481 13.0001 28.9516H14.3511C13.0001 27.4166 12.8527 23.4155 12.8527 23.4155C12.1656 23.6399 11.3045 24.3846 11.1268 24.7939Z"
-  })), /* @__PURE__ */ React.createElement("span", null, "Tina Admin"))), message && /* @__PURE__ */ React.createElement("div", {
-    className: "px-5 py-4 "
+  })), /* @__PURE__ */ React.createElement("span", null, "Tina"))), message && /* @__PURE__ */ React.createElement("div", {
+    className: "px-5 pt-4"
   }, /* @__PURE__ */ React.createElement("p", {
     className: "text-base font-sans leading-normal"
   }, message)), /* @__PURE__ */ React.createElement("div", {
@@ -3279,38 +3255,52 @@ const AuthTemplate = ({
 const LoginPage = () => {
   const { setEdit } = useEditState();
   const login = () => setEdit(true);
-  return /* @__PURE__ */ React.createElement(AuthTemplate, null, /* @__PURE__ */ React.createElement("a", {
-    href: "/",
-    className: "flex-1 text-center inline-flex justify-center items-center px-8 py-3 shadow-sm text-sm leading-4 font-medium rounded-full text-gray-600 border border-gray-150 hover:opacity-80 hover:bg-gray-50 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out"
+  return /* @__PURE__ */ React.createElement(AuthTemplate, null, /* @__PURE__ */ React.createElement("div", {
+    className: "flex w-full flex-1 gap-4 items-center justify-end"
+  }, /* @__PURE__ */ React.createElement(Button, {
+    onClick: () => {
+      window.location.href = "/";
+    },
+    variant: "white",
+    size: "custom",
+    className: "text-base h-12 px-6 flex-shrink-0 flex-grow-0"
   }, /* @__PURE__ */ React.createElement(MdOutlineArrowBack, {
     className: "w-6 h-auto mr-1.5 opacity-80"
-  }), " Back to site"), /* @__PURE__ */ React.createElement("button", {
-    type: "submit",
+  }), " Back To Site"), /* @__PURE__ */ React.createElement(Button, {
     onClick: () => login(),
-    className: "flex-1 justify-center text-center inline-flex items-center px-8 py-3 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out",
-    style: { background: "#0084FF" }
+    variant: "primary",
+    size: "custom",
+    className: "text-base h-12 px-6 flex-1",
+    type: "submit"
   }, /* @__PURE__ */ React.createElement(BiLogIn, {
-    className: "w-6 h-auto mr-1.5 opacity-80"
-  }), " Enter edit-mode"));
+    className: "w-6 h-auto mr-2 opacity-80"
+  }), " Edit With Tina")));
 };
 const logout = () => {
   setEditing(false);
   window.location.href = "/";
 };
 const LogoutPage = () => {
-  return /* @__PURE__ */ React.createElement(AuthTemplate, null, /* @__PURE__ */ React.createElement("a", {
-    href: "/",
-    className: "flex-1 text-center inline-flex justify-center items-center px-8 py-3 shadow-sm text-sm leading-4 font-medium rounded-full text-gray-600 border border-gray-150 hover:opacity-80 hover:bg-gray-50 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out"
+  return /* @__PURE__ */ React.createElement(AuthTemplate, null, /* @__PURE__ */ React.createElement("div", {
+    className: "flex w-full flex-1 gap-4 items-center justify-end"
+  }, /* @__PURE__ */ React.createElement(Button, {
+    onClick: () => {
+      window.location.href = "/";
+    },
+    variant: "white",
+    size: "custom",
+    className: "text-base h-12 px-6 flex-shrink-0 flex-grow-0"
   }, /* @__PURE__ */ React.createElement(MdOutlineArrowBack, {
     className: "w-6 h-auto mr-1.5 opacity-80"
-  }), " Back to site"), /* @__PURE__ */ React.createElement("button", {
-    type: "submit",
+  }), " Back To Site"), /* @__PURE__ */ React.createElement(Button, {
     onClick: () => logout(),
-    className: "flex-1 justify-center text-center inline-flex items-center px-8 py-3 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out",
-    style: { background: "#0084FF" }
+    type: "submit",
+    variant: "primary",
+    size: "custom",
+    className: "text-base h-12 px-6 flex-1"
   }, /* @__PURE__ */ React.createElement(BiLogOut, {
     className: "w-6 h-auto mr-1.5 opacity-80"
-  }), " Log out"));
+  }), " Log Out of Tina")));
 };
 const PageWrapper = ({
   children
@@ -3351,20 +3341,119 @@ const DashboardPage = () => {
     }, "Welcome to Tina!")), /* @__PURE__ */ React.createElement(PageBodyNarrow, null, "This is your dashboard for editing or creating content. Select a collection on the left to begin.")));
   });
 };
-function FiMoreVertical(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "1" } }, { "tag": "circle", "attr": { "cx": "12", "cy": "5", "r": "1" } }, { "tag": "circle", "attr": { "cx": "12", "cy": "19", "r": "1" } }] })(props);
-}
+const LoadingPage = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+  style: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 200,
+    opacity: "0.8",
+    display: "flex",
+    alignItems: "start",
+    justifyContent: "center",
+    padding: "120px 40px 40px 40px"
+  }
+}, /* @__PURE__ */ React.createElement("div", {
+  style: {
+    background: "#FFF",
+    border: "1px solid #EDECF3",
+    boxShadow: "0px 2px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.1)",
+    borderRadius: "8px",
+    padding: "32px 24px",
+    width: "460px",
+    maxWidth: "90%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column"
+  }
+}, /* @__PURE__ */ React.createElement("svg", {
+  style: {
+    width: "64px",
+    color: "#2296fe",
+    marginTop: "-8px",
+    marginBottom: "16px"
+  },
+  version: "1.1",
+  id: "L5",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink",
+  x: "0px",
+  y: "0px",
+  viewBox: "0 0 100 64",
+  enableBackground: "new 0 0 0 0",
+  xmlSpace: "preserve"
+}, /* @__PURE__ */ React.createElement("circle", {
+  fill: "currentColor",
+  stroke: "none",
+  cx: 6,
+  cy: 32,
+  r: 6
+}, /* @__PURE__ */ React.createElement("animateTransform", {
+  attributeName: "transform",
+  dur: "1s",
+  type: "translate",
+  values: "0 15 ; 0 -15; 0 15",
+  calcMode: "spline",
+  keySplines: "0.8 0 0.4 1; 0.4 0 0.2 1",
+  repeatCount: "indefinite",
+  begin: "0.1"
+})), /* @__PURE__ */ React.createElement("circle", {
+  fill: "currentColor",
+  stroke: "none",
+  cx: 30,
+  cy: 32,
+  r: 6
+}, /* @__PURE__ */ React.createElement("animateTransform", {
+  attributeName: "transform",
+  dur: "1s",
+  type: "translate",
+  values: "0 15 ; 0 -10; 0 15",
+  calcMode: "spline",
+  keySplines: "0.8 0 0.4 1; 0.4 0 0.2 1",
+  repeatCount: "indefinite",
+  begin: "0.2"
+})), /* @__PURE__ */ React.createElement("circle", {
+  fill: "currentColor",
+  stroke: "none",
+  cx: 54,
+  cy: 32,
+  r: 6
+}, /* @__PURE__ */ React.createElement("animateTransform", {
+  attributeName: "transform",
+  dur: "1s",
+  type: "translate",
+  values: "0 15 ; 0 -5; 0 15",
+  calcMode: "spline",
+  keySplines: "0.8 0 0.4 1; 0.4 0 0.2 1",
+  repeatCount: "indefinite",
+  begin: "0.3"
+}))), /* @__PURE__ */ React.createElement("p", {
+  style: {
+    fontSize: "16px",
+    color: "#716c7f",
+    textAlign: "center",
+    lineHeight: "1.3",
+    fontFamily: "'Inter', sans-serif",
+    fontWeight: "normal"
+  }
+}, "Please wait, Tina is loading data..."))));
 const useGetCollection = (cms, collectionName, includeDocuments = true) => {
   const api = new TinaAdminApi(cms);
   const [collection, setCollection] = useState(void 0);
+  const [loading, setLoading] = useState(true);
   useEffect(() => {
     const fetchCollection = async () => {
       const response = await api.fetchCollection(collectionName, includeDocuments);
       setCollection(response.getCollection);
+      setLoading(false);
     };
+    setLoading(true);
     fetchCollection();
   }, [cms, collectionName]);
-  return collection;
+  return { collection, loading };
 };
 const GetCollection = ({
   cms,
@@ -3372,11 +3461,11 @@ const GetCollection = ({
   includeDocuments = true,
   children
 }) => {
-  const collection = useGetCollection(cms, collectionName, includeDocuments);
-  if (!collection) {
-    return null;
+  const { collection, loading } = useGetCollection(cms, collectionName, includeDocuments);
+  if (!collection || loading === true) {
+    return /* @__PURE__ */ React.createElement(LoadingPage, null);
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, loading));
 };
 const TemplateMenu = ({ templates }) => {
   return /* @__PURE__ */ React.createElement(Menu, {
@@ -3405,12 +3494,21 @@ const TemplateMenu = ({ templates }) => {
     className: `w-full text-md px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`
   }, template.label))))))));
 };
+const handleNavigate = (navigate, cms, collection, document) => {
+  const plugins = cms.plugins.all("tina-admin");
+  const routeMapping = plugins.find(({ name }) => name === "route-mapping");
+  const routeOverride = routeMapping ? routeMapping.mapper(collection, document) : void 0;
+  if (routeOverride) {
+    window.location.href = routeOverride;
+    return null;
+  } else {
+    navigate(document.sys.filename);
+  }
+};
 const CollectionListPage = () => {
-  const { collectionName } = useParams();
   const navigate = useNavigate();
+  const { collectionName } = useParams();
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
-    const plugins = cms.plugins.all("tina-admin");
-    const routeMapping = plugins.find(({ name }) => name === "route-mapping");
     return /* @__PURE__ */ React.createElement(GetCollection, {
       cms,
       collectionName,
@@ -3437,24 +3535,16 @@ const CollectionListPage = () => {
       }, /* @__PURE__ */ React.createElement("tbody", {
         className: "divide-y divide-gray-150"
       }, documents.map((document) => {
-        const overrideRoute = routeMapping ? routeMapping.mapper(collection, document.node) : void 0;
         return /* @__PURE__ */ React.createElement("tr", {
           key: `document-${document.node.sys.filename}`,
           className: ""
         }, /* @__PURE__ */ React.createElement("td", {
           className: "px-6 py-2 whitespace-nowrap"
-        }, overrideRoute && /* @__PURE__ */ React.createElement("a", {
-          className: "text-blue-600 hover:text-blue-400 flex items-center gap-3",
-          href: `${overrideRoute}`
-        }, /* @__PURE__ */ React.createElement(BiEdit, {
-          className: "inline-block h-6 w-auto opacity-70"
-        }), /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", {
-          className: "block text-xs text-gray-400 mb-1 uppercase"
-        }, "Filename"), /* @__PURE__ */ React.createElement("span", {
-          className: "h-5 leading-5 block whitespace-nowrap"
-        }, document.node.sys.filename))), !overrideRoute && /* @__PURE__ */ React.createElement(Link, {
-          className: "text-blue-600 hover:text-blue-400 flex items-center gap-3",
-          to: `${document.node.sys.filename}`
+        }, /* @__PURE__ */ React.createElement("a", {
+          className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer",
+          onClick: () => {
+            handleNavigate(navigate, cms, collection, document.node);
+          }
         }, /* @__PURE__ */ React.createElement(BiEdit, {
           className: "inline-block h-6 w-auto opacity-70"
         }), /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", {
@@ -3473,55 +3563,11 @@ const CollectionListPage = () => {
           className: "block text-xs text-gray-400 mb-1 uppercase"
         }, "Template"), /* @__PURE__ */ React.createElement("span", {
           className: "h-5 leading-5 block text-sm font-medium text-gray-900"
-        }, document.node.sys.template)), overrideRoute && /* @__PURE__ */ React.createElement("td", {
-          className: "w-0"
-        }, /* @__PURE__ */ React.createElement(OverflowMenu, {
-          items: [
-            {
-              label: "Edit in Admin",
-              icon: BiEdit,
-              onClick: () => {
-                navigate(`${document.node.sys.filename}`, { replace: true });
-              }
-            }
-          ]
-        })));
+        }, document.node.sys.template)));
       })))))));
     });
   });
 };
-const OverflowMenu = ({ items = [] }) => {
-  if (items.length === 0)
-    return null;
-  return /* @__PURE__ */ React.createElement(Menu, null, ({ open }) => /* @__PURE__ */ React.createElement("div", {
-    className: "relative"
-  }, /* @__PURE__ */ React.createElement(Menu.Button, {
-    className: `flex-1 group px-5 py-3 flex justify-between items-center transition-all duration-300 ease-in-out transform`
-  }, /* @__PURE__ */ React.createElement(FiMoreVertical, {
-    className: `flex-0 w-6 h-full inline-block text-gray-400 transition-all duration-300 ease-in-out transform ${open ? `opacity-100 text-blue-500` : `opacity-70 group-hover:opacity-100`}`
-  })), /* @__PURE__ */ React.createElement("div", {
-    className: "transform translate-y-full absolute bottom-2 right-5 z-50"
-  }, /* @__PURE__ */ React.createElement(Transition, {
-    enter: "transition duration-150 ease-out",
-    enterFrom: "transform opacity-0 -translate-y-2",
-    enterTo: "transform opacity-100 translate-y-0",
-    leave: "transition duration-75 ease-in",
-    leaveFrom: "transform opacity-100 translate-y-0",
-    leaveTo: "transform opacity-0 -translate-y-2"
-  }, /* @__PURE__ */ React.createElement(Menu.Items, {
-    className: "bg-white border border-gray-150 rounded-lg shadow-lg"
-  }, items.map((item) => {
-    const Icon = item.icon ? item.icon : BiExit;
-    return /* @__PURE__ */ React.createElement(Menu.Item, {
-      key: `menu-item-${item.label}`
-    }, ({ active }) => /* @__PURE__ */ React.createElement("button", {
-      className: `w-full text-base px-4 py-2 first:pt-3 last:pb-3 tracking-wide whitespace-nowrap flex items-center opacity-80 text-gray-600 ${active && "text-blue-400 bg-gray-50 opacity-100"}`,
-      onClick: item.onClick
-    }, /* @__PURE__ */ React.createElement(Icon, {
-      className: "w-6 h-auto mr-2 text-blue-400"
-    }), " ", item.label));
-  }))))));
-};
 function HiChevronRight(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clipRule": "evenodd" } }] })(props);
 }
@@ -3533,6 +3579,7 @@ const useGetDocumentFields = (cms, collectionName, templateName) => {
     fields: void 0,
     mutationInfo: void 0
   });
+  const [loading, setLoading] = useState(true);
   useEffect(() => {
     const fetchDocumentFields = async () => {
       const response = await api.fetchDocumentFields();
@@ -3553,10 +3600,12 @@ const useGetDocumentFields = (cms, collectionName, templateName) => {
         fields,
         mutationInfo
       });
+      setLoading(false);
     };
+    setLoading(true);
     fetchDocumentFields();
   }, [cms, collectionName]);
-  return info;
+  return __spreadProps(__spreadValues({}, info), { loading });
 };
 const GetDocumentFields = ({
   cms,
@@ -3564,11 +3613,11 @@ const GetDocumentFields = ({
   templateName,
   children
 }) => {
-  const { collection, template, fields, mutationInfo } = useGetDocumentFields(cms, collectionName, templateName);
-  if (!collection) {
-    return null;
+  const { collection, template, fields, mutationInfo, loading } = useGetDocumentFields(cms, collectionName, templateName);
+  if (!collection || loading) {
+    return /* @__PURE__ */ React.createElement(LoadingPage, null);
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children({ collection, template, fields, mutationInfo }));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children({ collection, template, fields, mutationInfo, loading }));
 };
 const createDocument = async (cms, collection, template, mutationInfo, values) => {
   const api = new TinaAdminApi(cms);
@@ -3658,14 +3707,17 @@ const RenderForm$1 = ({ cms, collection, template, fields, mutationInfo }) => {
 const useGetDocument = (cms, collectionName, relativePath) => {
   const api = new TinaAdminApi(cms);
   const [document, setDocument] = useState(void 0);
+  const [loading, setLoading] = useState(true);
   useEffect(() => {
     const fetchDocument = async () => {
       const response = await api.fetchDocument(collectionName, relativePath);
       setDocument(response.getDocument);
+      setLoading(false);
     };
+    setLoading(true);
     fetchDocument();
   }, [cms, collectionName, relativePath]);
-  return document;
+  return { document, loading };
 };
 const GetDocument = ({
   cms,
@@ -3673,11 +3725,11 @@ const GetDocument = ({
   relativePath,
   children
 }) => {
-  const document = useGetDocument(cms, collectionName, relativePath);
-  if (!document) {
-    return null;
+  const { document, loading } = useGetDocument(cms, collectionName, relativePath);
+  if (!document || loading) {
+    return /* @__PURE__ */ React.createElement(LoadingPage, null);
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(document));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(document, loading));
 };
 const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
   const api = new TinaAdminApi(cms);
@@ -3797,7 +3849,7 @@ const TinaAdmin = () => {
       }, /* @__PURE__ */ React.createElement(Sidebar, {
         cms
       }), /* @__PURE__ */ React.createElement("div", {
-        className: "flex-1"
+        className: "flex-1 relative"
       }, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
         path: "collections/:collectionName/new",
         element: /* @__PURE__ */ React.createElement(CollectionCreatePage, null)