tinacms 0.66.4 → 0.66.5

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # tinacms
 
+## 0.66.5
+
+### Patch Changes
+
+- 43c834565: Adds an activity indicator throughout Admin
+- 53a4550db: Allows RouteMapping to be dynamically imported
+- 731451bee: Adjust the JWT token refresh logic to refresh tokens _before_ they expire.
+- e102d7438: Updated auth modal to use toolkit button components
+- Updated dependencies [43c834565]
+  - @tinacms/toolkit@0.56.15
+
 ## 0.66.4
 
 ### Patch Changes

package/dist/admin/components/GetCollection.d.ts

@@ -12,7 +12,10 @@ limitations under the License.
 */
 import type { TinaCMS } from '@tinacms/toolkit';
 import type { Collection } from '../types';
-export declare const useGetCollection: (cms: TinaCMS, collectionName: string, includeDocuments?: boolean) => Collection;
+export declare const useGetCollection: (cms: TinaCMS, collectionName: string, includeDocuments?: boolean) => {
+    collection: Collection;
+    loading: boolean;
+};
 declare const GetCollection: ({ cms, collectionName, includeDocuments, children, }: {
     cms: TinaCMS;
     collectionName: string;

package/dist/admin/components/GetCollections.d.ts

@@ -15,7 +15,6 @@ import type { Collection } from '../types';
 export declare const useGetCollections: (cms: TinaCMS) => {
     collections: Collection[];
     loading: boolean;
-    error: boolean;
 };
 declare const GetCollections: ({ cms, children }: {
     cms: TinaCMS;

package/dist/admin/components/GetDocument.d.ts

@@ -12,7 +12,10 @@ limitations under the License.
 */
 import type { TinaCMS } from '@tinacms/toolkit';
 import type { DocumentForm } from '../types';
-export declare const useGetDocument: (cms: TinaCMS, collectionName: string, relativePath: string) => DocumentForm;
+export declare const useGetDocument: (cms: TinaCMS, collectionName: string, relativePath: string) => {
+    document: DocumentForm;
+    loading: boolean;
+};
 declare const GetDocument: ({ cms, collectionName, relativePath, children, }: {
     cms: TinaCMS;
     collectionName: string;

package/dist/admin/components/GetDocumentFields.d.ts

@@ -20,7 +20,16 @@ export interface Info {
         includeTemplate: boolean;
     };
 }
-export declare const useGetDocumentFields: (cms: TinaCMS, collectionName: string, templateName: string) => Info;
+export declare const useGetDocumentFields: (cms: TinaCMS, collectionName: string, templateName: string) => {
+    loading: boolean;
+    collection: Object | undefined;
+    template: Object | undefined;
+    fields: Object[] | undefined;
+    mutationInfo: {
+        includeCollection: boolean;
+        includeTemplate: boolean;
+    };
+};
 declare const GetDocumentFields: ({ cms, collectionName, templateName, children, }: {
     cms: TinaCMS;
     collectionName: string;

package/dist/admin/components/LoadingPage.d.ts

@@ -0,0 +1,14 @@
+/**
+Copyright 2021 Forestry.io Holdings, Inc.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+declare const LoadingPage: () => JSX.Element;
+export default LoadingPage;

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;
 }
@@ -2156,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;
 }
@@ -2195,6 +2205,10 @@ Document
 	transform: var(--tw-transform) !important;
 }
 
+.tina-tailwind .cursor-pointer {
+	cursor: pointer !important;
+}
+
 .tina-tailwind .flex-col {
 	flex-direction: column !important;
 }
@@ -2211,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;
 }
@@ -2278,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;
@@ -2365,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 {
@@ -2444,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;
 }
@@ -2549,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;
@@ -2648,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;
@@ -2667,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;
@@ -3157,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, {
@@ -3204,7 +3187,7 @@ const Sidebar = ({ cms }) => {
       to: `collections/${collection.name}`,
       Icon: ImFilesEmpty
     })
-  }));
+  });
 };
 const SidebarLink = (props) => {
   const { to, label, Icon } = props;
@@ -3261,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", {
@@ -3272,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
@@ -3344,17 +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.")));
   });
 };
+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,
@@ -3362,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, {
@@ -3395,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 navigate = useNavigate();
   const { collectionName } = useParams();
-  useNavigate();
   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,
@@ -3427,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", {
@@ -3479,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();
@@ -3499,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,
@@ -3510,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);
@@ -3604,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,
@@ -3619,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);
@@ -3743,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)

package/dist/index.js

@@ -539,7 +539,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: {
@@ -897,6 +897,9 @@ mutation addPendingDocumentMutation(
     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) {
@@ -921,11 +924,6 @@ mutation addPendingDocumentMutation(
       return newBranch;
     };
     setupMedia();
-    React__default["default"].useMemo(() => {
-      if (cms.flags.get("tina-admin") === true) {
-        cms.registerApi("admin", new TinaAdminApi(cms));
-      }
-    }, [cms, cms.flags.get("tina-admin")]);
     const [branchingEnabled, setBranchingEnabled] = React__default["default"].useState(() => cms.flags.get("branch-switcher"));
     React__default["default"].useEffect(() => {
       cms.events.subscribe("flag:set", ({ key, value }) => {
@@ -2132,6 +2130,10 @@ Document
 	height: 20px !important;
 }
 
+.tina-tailwind .h-12 {
+	height: 48px !important;
+}
+
 .tina-tailwind .w-full {
 	width: 100% !important;
 }
@@ -2176,6 +2178,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;
 }
@@ -2215,6 +2225,10 @@ Document
 	transform: var(--tw-transform) !important;
 }
 
+.tina-tailwind .cursor-pointer {
+	cursor: pointer !important;
+}
+
 .tina-tailwind .flex-col {
 	flex-direction: column !important;
 }
@@ -2231,6 +2245,10 @@ Document
 	align-items: stretch !important;
 }
 
+.tina-tailwind .justify-end {
+	justify-content: flex-end !important;
+}
+
 .tina-tailwind .justify-center {
 	justify-content: center !important;
 }
@@ -2298,10 +2316,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;
@@ -2385,9 +2399,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 {
@@ -2464,10 +2477,6 @@ Document
 	line-height: 20px !important;
 }
 
-.tina-tailwind .leading-4 {
-	line-height: 16px !important;
-}
-
 .tina-tailwind .tracking-wide {
 	letter-spacing: 0.025em !important;
 }
@@ -2569,11 +2578,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;
@@ -2668,11 +2672,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;
@@ -2687,10 +2686,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;
@@ -3177,41 +3172,29 @@ This will work when developing locally but NOT when deployed to production.
   }
   const useGetCollections = (cms) => {
     const api = new TinaAdminApi(cms);
-    const [info, setInfo] = React.useState({ collections: [], loading: true, error: false });
+    const [collections, setCollections] = React.useState([]);
+    const [loading, setLoading] = React.useState(true);
     React.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__default["default"].createElement(React__default["default"].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__default["default"].createElement(GetCollections, {
-      cms
-    }, (collections, loading, error) => /* @__PURE__ */ React__default["default"].createElement(toolkit.Nav, {
+    return /* @__PURE__ */ React__default["default"].createElement(toolkit.Nav, {
       sidebarWidth: 360,
       showCollections: true,
-      collectionsInfo: {
-        collections,
-        loading,
-        error
-      },
+      collectionsInfo,
       screens,
       contentCreators: [],
       RenderNavSite: ({ view }) => /* @__PURE__ */ React__default["default"].createElement(SidebarLink, {
@@ -3224,7 +3207,7 @@ This will work when developing locally but NOT when deployed to production.
         to: `collections/${collection.name}`,
         Icon: ImFilesEmpty
       })
-    }));
+    });
   };
   const SidebarLink = (props) => {
     const { to, label, Icon } = props;
@@ -3281,8 +3264,8 @@ This will work when developing locally but NOT when deployed to production.
       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__default["default"].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__default["default"].createElement("span", null, "Tina Admin"))), message && /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "px-5 py-4 "
+    })), /* @__PURE__ */ React__default["default"].createElement("span", null, "Tina"))), message && /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "px-5 pt-4"
     }, /* @__PURE__ */ React__default["default"].createElement("p", {
       className: "text-base font-sans leading-normal"
     }, message)), /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -3292,38 +3275,52 @@ This will work when developing locally but NOT when deployed to production.
   const LoginPage = () => {
     const { setEdit } = sharedctx.useEditState();
     const login = () => setEdit(true);
-    return /* @__PURE__ */ React__default["default"].createElement(AuthTemplate, null, /* @__PURE__ */ React__default["default"].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__default["default"].createElement(AuthTemplate, null, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "flex w-full flex-1 gap-4 items-center justify-end"
+    }, /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      onClick: () => {
+        window.location.href = "/";
+      },
+      variant: "white",
+      size: "custom",
+      className: "text-base h-12 px-6 flex-shrink-0 flex-grow-0"
     }, /* @__PURE__ */ React__default["default"].createElement(MdOutlineArrowBack, {
       className: "w-6 h-auto mr-1.5 opacity-80"
-    }), " Back to site"), /* @__PURE__ */ React__default["default"].createElement("button", {
-      type: "submit",
+    }), " Back To Site"), /* @__PURE__ */ React__default["default"].createElement(toolkit.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__default["default"].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 = () => {
     sharedctx.setEditing(false);
     window.location.href = "/";
   };
   const LogoutPage = () => {
-    return /* @__PURE__ */ React__default["default"].createElement(AuthTemplate, null, /* @__PURE__ */ React__default["default"].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__default["default"].createElement(AuthTemplate, null, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "flex w-full flex-1 gap-4 items-center justify-end"
+    }, /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      onClick: () => {
+        window.location.href = "/";
+      },
+      variant: "white",
+      size: "custom",
+      className: "text-base h-12 px-6 flex-shrink-0 flex-grow-0"
     }, /* @__PURE__ */ React__default["default"].createElement(MdOutlineArrowBack, {
       className: "w-6 h-auto mr-1.5 opacity-80"
-    }), " Back to site"), /* @__PURE__ */ React__default["default"].createElement("button", {
-      type: "submit",
+    }), " Back To Site"), /* @__PURE__ */ React__default["default"].createElement(toolkit.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__default["default"].createElement(BiLogOut, {
       className: "w-6 h-auto mr-1.5 opacity-80"
-    }), " Log out"));
+    }), " Log Out of Tina")));
   };
   const PageWrapper = ({
     children
@@ -3364,17 +3361,119 @@ This will work when developing locally but NOT when deployed to production.
       }, "Welcome to Tina!")), /* @__PURE__ */ React__default["default"].createElement(PageBodyNarrow, null, "This is your dashboard for editing or creating content. Select a collection on the left to begin.")));
     });
   };
+  const LoadingPage = () => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("circle", {
+    fill: "currentColor",
+    stroke: "none",
+    cx: 6,
+    cy: 32,
+    r: 6
+  }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement("circle", {
+    fill: "currentColor",
+    stroke: "none",
+    cx: 30,
+    cy: 32,
+    r: 6
+  }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement("circle", {
+    fill: "currentColor",
+    stroke: "none",
+    cx: 54,
+    cy: 32,
+    r: 6
+  }, /* @__PURE__ */ React__default["default"].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__default["default"].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] = React.useState(void 0);
+    const [loading, setLoading] = React.useState(true);
     React.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,
@@ -3382,11 +3481,11 @@ This will work when developing locally but NOT when deployed to production.
     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__default["default"].createElement(LoadingPage, null);
     }
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collection));
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collection, loading));
   };
   const TemplateMenu = ({ templates }) => {
     return /* @__PURE__ */ React__default["default"].createElement(react.Menu, {
@@ -3415,12 +3514,21 @@ This will work when developing locally but NOT when deployed to production.
       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 navigate = reactRouterDom.useNavigate();
     const { collectionName } = reactRouterDom.useParams();
-    reactRouterDom.useNavigate();
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
-      const plugins = cms.plugins.all("tina-admin");
-      const routeMapping = plugins.find(({ name }) => name === "route-mapping");
       return /* @__PURE__ */ React__default["default"].createElement(GetCollection, {
         cms,
         collectionName,
@@ -3447,24 +3555,16 @@ This will work when developing locally but NOT when deployed to production.
         }, /* @__PURE__ */ React__default["default"].createElement("tbody", {
           className: "divide-y divide-gray-150"
         }, documents.map((document) => {
-          const overrideRoute = routeMapping ? routeMapping.mapper(collection, document.node) : void 0;
           return /* @__PURE__ */ React__default["default"].createElement("tr", {
             key: `document-${document.node.sys.filename}`,
             className: ""
           }, /* @__PURE__ */ React__default["default"].createElement("td", {
             className: "px-6 py-2 whitespace-nowrap"
-          }, overrideRoute && /* @__PURE__ */ React__default["default"].createElement("a", {
-            className: "text-blue-600 hover:text-blue-400 flex items-center gap-3",
-            href: `${overrideRoute}`
-          }, /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
-            className: "inline-block h-6 w-auto opacity-70"
-          }), /* @__PURE__ */ React__default["default"].createElement("span", null, /* @__PURE__ */ React__default["default"].createElement("span", {
-            className: "block text-xs text-gray-400 mb-1 uppercase"
-          }, "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
-            className: "h-5 leading-5 block whitespace-nowrap"
-          }, document.node.sys.filename))), !overrideRoute && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
-            className: "text-blue-600 hover:text-blue-400 flex items-center gap-3",
-            to: `${document.node.sys.filename}`
+          }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement(BiEdit, {
             className: "inline-block h-6 w-auto opacity-70"
           }), /* @__PURE__ */ React__default["default"].createElement("span", null, /* @__PURE__ */ React__default["default"].createElement("span", {
@@ -3499,6 +3599,7 @@ This will work when developing locally but NOT when deployed to production.
       fields: void 0,
       mutationInfo: void 0
     });
+    const [loading, setLoading] = React.useState(true);
     React.useEffect(() => {
       const fetchDocumentFields = async () => {
         const response = await api.fetchDocumentFields();
@@ -3519,10 +3620,12 @@ This will work when developing locally but NOT when deployed to production.
           fields,
           mutationInfo
         });
+        setLoading(false);
       };
+      setLoading(true);
       fetchDocumentFields();
     }, [cms, collectionName]);
-    return info;
+    return __spreadProps(__spreadValues({}, info), { loading });
   };
   const GetDocumentFields = ({
     cms,
@@ -3530,11 +3633,11 @@ This will work when developing locally but NOT when deployed to production.
     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__default["default"].createElement(LoadingPage, null);
     }
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children({ collection, template, fields, mutationInfo }));
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children({ collection, template, fields, mutationInfo, loading }));
   };
   const createDocument = async (cms, collection, template, mutationInfo, values) => {
     const api = new TinaAdminApi(cms);
@@ -3624,14 +3727,17 @@ This will work when developing locally but NOT when deployed to production.
   const useGetDocument = (cms, collectionName, relativePath) => {
     const api = new TinaAdminApi(cms);
     const [document, setDocument] = React.useState(void 0);
+    const [loading, setLoading] = React.useState(true);
     React.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,
@@ -3639,11 +3745,11 @@ This will work when developing locally but NOT when deployed to production.
     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__default["default"].createElement(LoadingPage, null);
     }
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(document));
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(document, loading));
   };
   const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
     const api = new TinaAdminApi(cms);
@@ -3763,7 +3869,7 @@ This will work when developing locally but NOT when deployed to production.
         }, /* @__PURE__ */ React__default["default"].createElement(Sidebar, {
           cms
         }), /* @__PURE__ */ React__default["default"].createElement("div", {
-          className: "flex-1"
+          className: "flex-1 relative"
         }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
           path: "collections/:collectionName/new",
           element: /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)

package/dist/style.css

@@ -725,6 +725,10 @@ Document
 	height: 20px !important;
 }
 
+.tina-tailwind .h-12 {
+	height: 48px !important;
+}
+
 .tina-tailwind .w-full {
 	width: 100% !important;
 }
@@ -769,6 +773,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;
 }
@@ -808,6 +820,10 @@ Document
 	transform: var(--tw-transform) !important;
 }
 
+.tina-tailwind .cursor-pointer {
+	cursor: pointer !important;
+}
+
 .tina-tailwind .flex-col {
 	flex-direction: column !important;
 }
@@ -824,6 +840,10 @@ Document
 	align-items: stretch !important;
 }
 
+.tina-tailwind .justify-end {
+	justify-content: flex-end !important;
+}
+
 .tina-tailwind .justify-center {
 	justify-content: center !important;
 }
@@ -891,10 +911,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;
@@ -978,9 +994,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 {
@@ -1057,10 +1072,6 @@ Document
 	line-height: 20px !important;
 }
 
-.tina-tailwind .leading-4 {
-	line-height: 16px !important;
-}
-
 .tina-tailwind .tracking-wide {
 	letter-spacing: 0.025em !important;
 }
@@ -1162,11 +1173,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;
@@ -1261,11 +1267,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;
@@ -1280,10 +1281,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "0.66.4",
+  "version": "0.66.5",
   "main": "dist/index.js",
   "files": [
     "dist"
@@ -24,7 +24,7 @@
     "@headlessui/react": "^1.4.1",
     "@heroicons/react": "^1.0.4",
     "@tinacms/sharedctx": "0.1.0",
-    "@tinacms/toolkit": "0.56.14",
+    "@tinacms/toolkit": "0.56.15",
     "crypto-js": "^4.0.0",
     "final-form": "4.20.1",
     "graphql": "^15.1.0",