feat: add first load control

src/components/planets/add-planet-dialog.tsx

@@ -19,8 +19,8 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { useToast } from "@/components/ui/use-toast";
-import { usePlanets } from "@/lib/atoms";
 import { insertPlanetSchema } from "@/lib/schemas";
+import { usePlanets } from "@/lib/store";
 import type { InsertPlanet, Planet } from "@/lib/types";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { IconPlus, IconTrash } from "@tabler/icons-react";

src/components/planets/delete-planet-dialog.tsx

@@ -9,7 +9,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { toast } from "@/components/ui/use-toast";
-import { usePlanets } from "@/lib/atoms";
+import { usePlanets } from "@/lib/store";
 import type { Planet } from "@/lib/types";
 
 type Props = {

src/components/planets/edit-planet-form.tsx

@@ -10,8 +10,8 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { useToast } from "@/components/ui/use-toast";
-import { usePlanets } from "@/lib/atoms";
 import { updatePlanetSchema } from "@/lib/schemas";
+import { usePlanets } from "@/lib/store";
 import type { Planet, UpdatePlanet } from "@/lib/types";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { IconPlus, IconTrash } from "@tabler/icons-react";

src/components/planets/planet.tsx

@@ -3,7 +3,7 @@
 import { Heading } from "@/components/heading";
 import { ResidentCard } from "@/components/resident-card";
 import { useMediaQuery } from "@/hooks/use-media-query";
-import { usePlanets } from "@/lib/atoms";
+import { usePlanets } from "@/lib/store";
 import Image from "next/image";
 import { notFound } from "next/navigation";
 

src/components/planets/planets-list.tsx

@@ -6,8 +6,8 @@ import { PageOutOfBound } from "@/components/planets/page-out-of-bound";
 import { PlanetCard } from "@/components/planets/planet-card";
 import { PlanetsNotFound } from "@/components/planets/planets-not-found";
 
-import { usePlanets } from "@/lib/atoms";
 import { ITEMS_PER_PAGE } from "@/lib/constants";
+import { usePlanets } from "@/lib/store";
 import type {
   Order,
   OrderByField,
@@ -98,16 +98,17 @@ export function PlanetsList(props: Props) {
 
   const searchParams = useSearchParams();
 
-  const { planets, addPlanets } = usePlanets();
+  const { planets, addPlanets, setFirstLoadDone } = usePlanets();
 
   useEffect(() => {
     const storageItem = localStorage.getItem("planets");
     const local = storageItem
       ? (JSON.parse(storageItem) as ZustandPlanetsStorage)
       : undefined;
 
-    if (!local?.state.planets) {
+    if (!local?.state.planets || !local?.state.firstLoadDone) {
       addPlanets(initialPlanets);
+      setFirstLoadDone(true);
     }
   }, []);
 

src/lib/atoms.ts → src/lib/store.ts

@@ -4,6 +4,8 @@ import { persist } from "zustand/middleware";
 
 type PlanetsStore = {
   planets: Planet[] | null;
+  firstLoadDone: boolean | null;
+  setFirstLoadDone: (value: boolean) => void;
   addPlanet: (planet: Planet) => void;
   addPlanets: (planets: Planet[]) => void;
   updatePlanet: (planet: Planet) => void;
@@ -14,6 +16,8 @@ export const usePlanets = create<PlanetsStore>()(
   persist(
     (set) => ({
       planets: null,
+      firstLoadDone: null,
+      setFirstLoadDone: (value: boolean) => set({ firstLoadDone: value }),
       addPlanet: (planet: Planet) =>
         set((state) => ({ planets: [...(state.planets ?? []), planet] })),
       addPlanets: (planets: Planet[]) =>

src/lib/types.ts

@@ -18,7 +18,8 @@ export type Order = "asc" | "desc";
 
 export type ZustandPlanetsStorage = {
   state: {
-    planets: Planet[];
+    planets: Planet[] | null;
+    firstLoadDone: boolean | null;
   };
   version: number;
 } | null;