removed defer (#18)

ecds · Nov 22, 2024 · 0aaeafc · 0aaeafc
1 parent cffc173
commit 0aaeafc
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 56 deletions.
diff --git a/app/routes/about._index.tsx b/app/routes/about._index.tsx
@@ -1,5 +1,4 @@
 import Navbar from "~/components/layout/Navbar";
-import { defer } from "@remix-run/node";
 import { dataHosts } from "~/config";
 import { useLoaderData } from "@remix-run/react";
 import "~/styles/about.css";
@@ -13,11 +12,12 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
 
   const wpData: TWordPressData[] = await wpResponse.json();
 
-  return defer({ wpData: wpData[0] });
+  return { wpData: wpData[0] };
 };
 
 const About = () => {
   const { wpData } = useLoaderData<{ wpData: TWordPressData }>();
+
   return (
     <div>
       <Navbar />

diff --git a/app/routes/about.bibliography.tsx b/app/routes/about.bibliography.tsx
@@ -1,5 +1,5 @@
 import Navbar from "~/components/layout/Navbar";
-import { defer } from "@remix-run/node";
+
 import { dataHosts } from "~/config";
 import { useLoaderData } from "@remix-run/react";
 import "~/styles/about.css";
@@ -13,7 +13,7 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
 
   const wpData: TWordPressData[] = await wpResponse.json();
 
-  return defer({ wpData: wpData[0] });
+  return { wpData: wpData[0] };
 };
 
 const About = () => {

diff --git a/app/routes/explore.tsx b/app/routes/explore.tsx
@@ -1,6 +1,6 @@
 import { useContext, useState, useEffect, Suspense } from "react";
 import { MapContext } from "~/contexts";
-import { useLoaderData, defer, useNavigation } from "@remix-run/react";
+import { useLoaderData, useNavigation, Await } from "@remix-run/react";
 import { fetchCounties, fetchPlacesByType } from "~/data/coredata";
 import IntroModal from "~/components/layout/IntroModal";
 import Loading from "~/components/layout/Loading";
@@ -13,7 +13,7 @@ import Islands from "~/components/mapping/Islands";
 export const loader: LoaderFunction = async () => {
   const islands: TPlace[] = await fetchPlacesByType("Barrier Island");
   const counties: TCounty[] = await fetchCounties();
-  return defer({ islands, counties });
+  return { islands, counties };
 };
 
 export const HydrateFallback = () => {
@@ -40,8 +40,18 @@ const Explore = () => {
     >
       <IntroModal isOpen={isModalOpen} setIsOpen={setIsModalOpen} />
       <Suspense fallback={<Loading />}>
-        <Counties counties={counties} />
-        <Islands islands={islands} />
+      <Await resolve={islands}>
+          {(resolvedIslands) => (
+            <Await resolve={counties}>
+              {(resolvedCounties) => (
+                <>
+                  <Counties counties={resolvedCounties} />
+                  <Islands islands={resolvedIslands} />
+                </>
+              )}
+            </Await>
+          )}
+        </Await>
       </Suspense>
     </div>
   );

diff --git a/app/routes/islands.$id.tsx b/app/routes/islands.$id.tsx
@@ -4,7 +4,7 @@ import {
   useNavigation,
   useRouteError,
   isRouteErrorResponse,
-  defer,
+  Await
 } from "@remix-run/react";
 import { dataHosts } from "~/config.ts";
 import { fetchPlaceBySlug } from "~/data/coredata";
@@ -36,7 +36,7 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
 
   const wpData: TWordPressData[] = await wpResponse.json();
 
-  return defer({ place, wpData: wpData[0] });
+  return { place, wpData: wpData[0] };
 };
 
 // export const clientLoader = async ({
@@ -103,23 +103,27 @@ const IslandPage = () => {
       }}
     >
       <Suspense fallback={<HydrateFallback />}>
-        <PlaceContent>
-          <Heading
-            as="h1"
-            className="text-2xl px-4 pt-4 sticky top-0 z-10 bg-white"
-          >
-            {place.name}
-          </Heading>
-          <div ref={topRef} className="relative -top-12 z-10 min-h-10">
-            <FeaturedMedium record={place} />
-          </div>
-          <div
-            className="relative px-4 -mt-12 primary-content"
-            dangerouslySetInnerHTML={{
-              __html: wpData?.content.rendered ?? place.description,
-            }}
-          />
-        </PlaceContent>
+      <Await resolve={wpData}>
+          {(resolvedWpData) => (
+            <PlaceContent>
+              <Heading
+                as="h1"
+                className="text-2xl px-4 pt-4 sticky top-0 z-10 bg-white"
+              >
+                {place.name}
+              </Heading>
+              <div className="relative -top-12 z-10 min-h-10">
+                <FeaturedMedium record={place} />
+              </div>
+              <div
+                className="relative px-4 -mt-12 primary-content"
+                dangerouslySetInnerHTML={{
+                  __html: resolvedWpData?.content.rendered ?? place.description,
+                }}
+              />
+            </PlaceContent>
+          )}
+        </Await>
       </Suspense>
     </PlaceContext.Provider>
   );

diff --git a/app/routes/places.$id.tsx b/app/routes/places.$id.tsx
@@ -1,9 +1,9 @@
 import { Suspense, useEffect, useRef, useState } from "react";
 import {
   useLoaderData,
-  defer,
   useNavigate,
   useLocation,
+  Await
 } from "@remix-run/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
@@ -34,7 +34,7 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
     });
   }
 
-  return defer({ place });
+  return { place };
 };
 const PlacePage = () => {
   const { place } = useLoaderData<TPlaceRecord>();
@@ -63,33 +63,39 @@ const PlacePage = () => {
       }}
     >
       <Suspense fallback={<Loading />}>
-        <PlaceContent>
-          {backTo && (
-            <button
-              onClick={() => navigate(-1)}
-              className="bg-gray-300 hover:bg-gray-400 border-spacing-1 drop-shadow-sm px-6 py-2 rounded-lg text-left w-max m-4 text-xs"
-            >
-              <FontAwesomeIcon icon={faArrowLeft} /> Back to {backTo}
-            </button>
+        <Await resolve={place}>
+          {(resolvedPlace) => (
+            <>
+              <PlaceContent>
+                {backTo && (
+                  <button
+                    onClick={() => navigate(-1)}
+                    className="bg-gray-300 hover:bg-gray-400 border-spacing-1 drop-shadow-sm px-6 py-2 rounded-lg text-left w-max m-4 text-xs"
+                  >
+                    <FontAwesomeIcon icon={faArrowLeft} /> Back to {backTo}
+                  </button>
+                )}
+                <Heading
+                  as="h1"
+                  className="text-2xl px-4 pt-4 sticky top-0 z-10 bg-white"
+                >
+                  {resolvedPlace.name}
+                </Heading>
+                <div ref={topRef} className="relative -top-12 z-10 min-h-10">
+                  <FeaturedMedium record={resolvedPlace} />
+                </div>
+                <div
+                  className="relative px-4 -mt-12 primary-content"
+                  dangerouslySetInnerHTML={{
+                    __html: resolvedPlace.description,
+                  }}
+                />
+              </PlaceContent>
+              {/* <RelatedRecords /> */}
+              {resolvedPlace.geojson && <PlaceGeoJSON />}
+            </>
           )}
-          <Heading
-            as="h1"
-            className="text-2xl px-4 pt-4 sticky top-0 z-10 bg-white"
-          >
-            {place.name}
-          </Heading>
-          <div ref={topRef} className="relative -top-12 z-10 min-h-10">
-            <FeaturedMedium record={place} />
-          </div>
-          <div
-            className="relative px-4 -mt-12 primary-content"
-            dangerouslySetInnerHTML={{
-              __html: place.description,
-            }}
-          />
-        </PlaceContent>
-        {/* <RelatedRecords /> */}
-        {place.geojson && <PlaceGeoJSON />}
+        </Await>
       </Suspense>
     </PlaceContext.Provider>
   );

diff --git a/vite.config.ts b/vite.config.ts
@@ -16,7 +16,11 @@ installGlobals();
 
 export default defineConfig({
   plugins: [
-    remix(),
+    remix({
+      future: {
+        v3_singleFetch: true, 
+      },
+    }),
     tsconfigPaths(),
     SiteMap({
       hostname: "https://georgiacoastatlas.org",