Setup placeholders with queries

src/app/_components/forecast-hourly.tsx

@@ -4,19 +4,31 @@ import { CloudSun } from "lucide-react";
 
 import { getLocationFromLocalStorage } from "~/lib/localStorage";
 
-const forecast12Hour = [
-  22.1, 21.9, 21.6, 21.4, 21.2, 21.1, 21.0, 20.9, 20.8, 20.7, 20.6, 20.5,
-];
-
 export function ForecastHourly() {
   const location = useQuery({
     queryKey: ["location"],
     queryFn: getLocationFromLocalStorage,
   });
 
+  const forecast = useQuery({
+    queryKey: ["forecast", location.data],
+    queryFn: async () => {
+      return [
+        22.1, 21.9, 21.6, 21.4, 21.2, 21.1, 21.0, 20.9, 20.8, 20.7, 20.6, 20.5,
+      ];
+    },
+  });
+
+  if (location.isLoading) return <span>Loading location...</span>;
+  if (location.isError) return <span>Error loading location...</span>;
+  if (forecast.isLoading) return <span>Loading forecast...</span>;
+  if (forecast.isError) return <span>Error loading forecast...</span>;
+  if (!forecast.data || !Array.isArray(forecast.data))
+    return <span>No forecast data.</span>;
+
   return (
     <div className="flex max-w-screen-md select-none flex-row gap-4 overflow-y-auto">
-      {forecast12Hour.map((temp, index) => (
+      {forecast.data.map((temp, index) => (
         <div key={index} className="flex flex-col items-stretch gap-1">
           <div className="flex flex-row items-center gap-1">
             <CloudSun className="h-16 w-16" />

src/app/_components/forecast-now.tsx

@@ -9,13 +9,26 @@ export function ForecastNow() {
     queryFn: getLocationFromLocalStorage,
   });
 
+  const forecast = useQuery({
+    queryKey: ["forecast", location.data],
+    queryFn: async () => {
+      return { temp: 22.2 };
+    },
+  });
+
+  if (location.isLoading) return <span>Loading location...</span>;
+  if (location.isError) return <span>Error loading location...</span>;
+  if (forecast.isLoading) return <span>Loading forecast...</span>;
+  if (forecast.isError) return <span>Error loading forecast...</span>;
+  if (!forecast.data) return <span>No forecast data.</span>;
+
   return (
     <div className="flex select-none flex-row items-stretch gap-6">
       <div className="flex flex-row items-center gap-1">
         <CloudSun className="h-24 w-24" />
       </div>
       <div className="flex flex-row items-center gap-1">
-        <span className="text-4xl font-bold">22.2</span>
+        <span className="text-4xl font-bold">{forecast.data.temp}</span>
         <span className="text-2xl font-semibold">°C</span>
       </div>
     </div>

src/app/_components/location-form.tsx

@@ -54,7 +54,7 @@ export function LocationForm() {
   }
 
   if (form.formState.isLoading) {
-    return <span>Loading...</span>;
+    return <span>Loading location...</span>;
   }
 
   return (