diff --git a/packages/dashboard-v2/src/components/LoadingIndicator/FullScreenLoadingIndicator.js b/packages/dashboard-v2/src/components/LoadingIndicator/FullScreenLoadingIndicator.js
new file mode 100644
index 00000000..ad261e2e
--- /dev/null
+++ b/packages/dashboard-v2/src/components/LoadingIndicator/FullScreenLoadingIndicator.js
@@ -0,0 +1,7 @@
+import { ContainerLoadingIndicator } from "./ContainerLoadingIndicator";
+
+export const FullScreenLoadingIndicator = () => (
+
+
+
+);
diff --git a/packages/dashboard-v2/src/components/LoadingIndicator/index.js b/packages/dashboard-v2/src/components/LoadingIndicator/index.js
index df7c2a88..5e7f91f4 100644
--- a/packages/dashboard-v2/src/components/LoadingIndicator/index.js
+++ b/packages/dashboard-v2/src/components/LoadingIndicator/index.js
@@ -1 +1,2 @@
export * from "./ContainerLoadingIndicator";
+export * from "./FullScreenLoadingIndicator";
diff --git a/packages/dashboard-v2/src/hooks/useUpgradeRedirect.js b/packages/dashboard-v2/src/hooks/useUpgradeRedirect.js
new file mode 100644
index 00000000..5529c152
--- /dev/null
+++ b/packages/dashboard-v2/src/hooks/useUpgradeRedirect.js
@@ -0,0 +1,31 @@
+import { navigate } from "gatsby";
+import { useEffect, useState } from "react";
+
+import { usePortalSettings } from "../contexts/portal-settings";
+import { useUser } from "../contexts/user";
+import freeTier from "../lib/tiers";
+
+export default function useUpgradeRedirect() {
+ const [verifyingSubscription, setVerifyingSubscription] = useState(true);
+ const { user, loading: userDataLoading } = useUser();
+ const { settings, loading: portalSettingsLoading } = usePortalSettings();
+
+ useEffect(() => {
+ setVerifyingSubscription(true);
+ const isDataLoaded = !userDataLoading && !portalSettingsLoading && user && settings;
+ const hasPaidSubscription = user.tier > freeTier.tier;
+
+ if (isDataLoaded) {
+ if (settings.isSubscriptionRequired && !hasPaidSubscription) {
+ console.log("redirecting", user, settings);
+ navigate("/upgrade");
+ } else {
+ setVerifyingSubscription(false);
+ }
+ }
+ }, [user, userDataLoading, settings.isSubscriptionRequired, portalSettingsLoading, settings]);
+
+ return {
+ verifyingSubscription,
+ };
+}
diff --git a/packages/dashboard-v2/src/layouts/DashboardLayout.js b/packages/dashboard-v2/src/layouts/DashboardLayout.js
index b369ece3..76af9218 100644
--- a/packages/dashboard-v2/src/layouts/DashboardLayout.js
+++ b/packages/dashboard-v2/src/layouts/DashboardLayout.js
@@ -8,7 +8,7 @@ import { PageContainer } from "../components/PageContainer";
import { NavBar } from "../components/Navbar";
import { Footer } from "../components/Footer";
import { UserProvider, useUser } from "../contexts/user";
-import { ContainerLoadingIndicator } from "../components/LoadingIndicator";
+import { FullScreenLoadingIndicator } from "../components/LoadingIndicator";
const Wrapper = styled.div.attrs({
className: "min-h-screen overflow-hidden",
@@ -24,11 +24,7 @@ const Layout = ({ children }) => {
// Prevent from flashing the dashboard screen to unauthenticated users.
return (
- {!user && (
-
-
-
- )}
+ {!user && }
{user && <>{children}>}
);
diff --git a/packages/dashboard-v2/src/pages/index.js b/packages/dashboard-v2/src/pages/index.js
index 4db97e04..1fd88651 100644
--- a/packages/dashboard-v2/src/pages/index.js
+++ b/packages/dashboard-v2/src/pages/index.js
@@ -12,9 +12,16 @@ import Slider from "../components/Slider/Slider";
import CurrentUsage from "../components/CurrentUsage";
import Uploader from "../components/Uploader/Uploader";
import CurrentPlan from "../components/CurrentPlan";
+import { FullScreenLoadingIndicator } from "../components/LoadingIndicator";
+import useUpgradeRedirect from "../hooks/useUpgradeRedirect";
const IndexPage = () => {
const showRecentActivity = useMedia(`(min-width: ${theme.screens.md})`);
+ const { verifyingSubscription } = useUpgradeRedirect();
+
+ if (verifyingSubscription) {
+ return ;
+ }
return (