diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..e9ee3cb
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+legacy-peer-deps=true
\ No newline at end of file
diff --git a/app/dashboard/layout.js b/app/(index)/layout.js
similarity index 57%
rename from app/dashboard/layout.js
rename to app/(index)/layout.js
index 4de18a8..7b8d936 100644
--- a/app/dashboard/layout.js
+++ b/app/(index)/layout.js
@@ -1,9 +1,12 @@
import Navbar from '../../components/Navbar';
import '../../styles/globals.css';
+/**
+ * Child layout that wraps the index page -- main page -- with specific styles
+ */
export default async function Layout({ children }) {
return (
-
+
{children}
diff --git a/app/(index)/loading.js b/app/(index)/loading.js
new file mode 100644
index 0000000..731ea6c
--- /dev/null
+++ b/app/(index)/loading.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ProgressBar from '../../components/ProgressBar';
+
+//Separated Loading components for each grouped route
+//this fixed an issue where sometimes the managed suspense would continue to show the loading status
+//even though the route segment was ready to render. This issue was occurring in dev mode, where there's no route prefetch
+export default function Loading() {
+ return
+}
\ No newline at end of file
diff --git a/app/dashboard/page.js b/app/(index)/page.js
similarity index 96%
rename from app/dashboard/page.js
rename to app/(index)/page.js
index 330320c..adb1e68 100644
--- a/app/dashboard/page.js
+++ b/app/(index)/page.js
@@ -18,7 +18,7 @@ const Dashboard = () => {
const [tooltipSlug, setTooltipSlug] = useState();
const [sample, range, timestamp, setTimestamp] = useSample(samples);
- const [showBanner, setShowBanner] = useState(true);
+ const [showBanner, setShowBanner] = useState(false);
const hideBanner = () => setShowBanner(false);
diff --git a/app/about/page.js b/app/(other)/about/page.js
similarity index 82%
rename from app/about/page.js
rename to app/(other)/about/page.js
index 56bac70..2e90574 100644
--- a/app/about/page.js
+++ b/app/(other)/about/page.js
@@ -1,5 +1,5 @@
-import AboutSection from '../../components/AboutSection';
-import content from '../../content';
+import AboutSection from '../../../components/AboutSection';
+import content from '../../../content';
const About = () => {
const aboutSection = (section, index) => (
diff --git a/app/data/page.js b/app/(other)/data/page.js
similarity index 83%
rename from app/data/page.js
rename to app/(other)/data/page.js
index bed38cf..b9d3ac3 100644
--- a/app/data/page.js
+++ b/app/(other)/data/page.js
@@ -1,9 +1,9 @@
'use client';
import React, { useState, useContext } from 'react';
-import Graphs from '../../components/Graphs';
-import Tooltip from '../../components/Tooltip';
-import { DataContext } from '../../providers/DataProvider';
+import Graphs from '../../../components/Graphs';
+import Tooltip from '../../../components/Tooltip';
+import { DataContext } from '../../../providers/DataProvider';
const Data = () => {
const { samples, sources, units } = useContext(DataContext);
diff --git a/app/about/layout.js b/app/(other)/layout.js
similarity index 58%
rename from app/about/layout.js
rename to app/(other)/layout.js
index e0318be..9cdf2b4 100644
--- a/app/about/layout.js
+++ b/app/(other)/layout.js
@@ -1,11 +1,16 @@
import Navbar from '../../components/Navbar';
import '../../styles/globals.css';
+/**
+ * Child layout that wraps all pages that are not index
+ * and has no index specific container styles
+ */
export default async function Layout({ children }) {
return (
-
+
{children}
);
}
+
diff --git a/app/(other)/loading.js b/app/(other)/loading.js
new file mode 100644
index 0000000..e83db8f
--- /dev/null
+++ b/app/(other)/loading.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ProgressBar from '../../components/ProgressBar';
+
+
+//Separated Loading components for each grouped route
+//this fixed an issue where sometimes the managed suspense would continue to show the loading status
+//even though the route segment was ready to render. This issue was occurring in dev mode, where there's no route prefetch
+export default function Loading() {
+ return
+}
\ No newline at end of file
diff --git a/app/data/layout.js b/app/data/layout.js
deleted file mode 100644
index 71eb7a3..0000000
--- a/app/data/layout.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Navbar from '../../components/Navbar';
-import '../../styles/globals.css';
-
-export default async function Layout({ children }) {
- return (
-
-
- {children}
-
- );
-}
diff --git a/app/googleAnalytics.js b/app/googleAnalytics.js
new file mode 100644
index 0000000..1904668
--- /dev/null
+++ b/app/googleAnalytics.js
@@ -0,0 +1,25 @@
+'use client' //use client so the script doesn't get loaded on the server
+
+import React from 'react';
+import Script from 'next/script';
+import { GA_TRACKING_ID } from '../helpers/constants';
+
+const GoogleAnalytics = () => (
+ <>
+
+
+ >
+);
+
+export default GoogleAnalytics;
diff --git a/app/head.js b/app/head.js
index cb96b04..f29fe3c 100644
--- a/app/head.js
+++ b/app/head.js
@@ -5,8 +5,8 @@ export default function Head() {
<>
{content.social.title}
-
-
+
+
diff --git a/app/layout.js b/app/layout.js
index 94e3e9c..ac1007f 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,38 +1,23 @@
-import { GA_TRACKING_ID } from '../helpers/constants';
-import Script from 'next/script';
-
+import { getData } from '/helpers/dataLoader';
import DataContextProvider from '../providers/DataProvider';
-import { getData } from '../helpers/dataLoader';
-
+import GoogleAnalytics from './googleAnalytics';
import '../styles/globals.css';
-const GoogleAnalytics = () => (
- <>
-
-
- >
-);
-
-export default async function RootLayout({ children }) {
+/**
+ * Root Layout that gets data and wraps the app with the Context Provider
+ */
+export default async function RootLayout ({ children }) {
let data = await getData();
return (
-
-