feat: enhance GlobalStoreProvider and MovieList components with display type management and loading spinner; integrate local storage for display preferences and improve user experience during initial render

src/components/molecules/MovieList/index.tsx

@@ -14,9 +14,9 @@ type Props = {
   heading?: string;
   icon?: ReactNode;
   colors?: keyof typeof colorsMap;
-  displayType?: "grid" | "list";
 
   overrideMovies?: Movie[];
+  overrideDisplayType?: "grid" | "list";
 
   showFilters?: boolean;
   filterSeen?: 0 | 1;
@@ -47,12 +47,16 @@ export const MovieList: FC<Props> = ({
   sort: sortType = "releaseDate",
   sortDirection = "asc",
   loadMore = false,
-  displayType = "grid",
+  overrideDisplayType,
 }) => {
-  const { movies: storeMovies } = useGlobalStore();
+  const {
+    movies: storeMovies,
+    displayType: displayTypeInitial,
+    setDisplayType,
+  } = useGlobalStore();
   const movies = overrideMovies || storeMovies;
+  const displayType = overrideDisplayType || displayTypeInitial;
 
-  const [display, setDisplay] = useState<"grid" | "list">(displayType);
   const [filter, setFilter] = useState({
     seen: filterSeenInitial,
     favorites: filterFavoritesInitial,
@@ -205,15 +209,17 @@ export const MovieList: FC<Props> = ({
                   defaultValue={sort}
                   callback={(value) => setSort(value as "title")}
                 />
-                <Button
-                  theme="glass"
-                  size="icon"
-                  onClick={() =>
-                    setDisplay(display === "grid" ? "list" : "grid")
-                  }
-                >
-                  <FaList />
-                </Button>
+                {!overrideDisplayType && (
+                  <Button
+                    theme="glass"
+                    size="icon"
+                    onClick={() =>
+                      setDisplayType(displayType === "grid" ? "list" : "grid")
+                    }
+                  >
+                    <FaList />
+                  </Button>
+                )}
               </div>
             )}
           </div>
@@ -227,7 +233,7 @@ export const MovieList: FC<Props> = ({
             ref={parent}
           >
             {sortedMovies.map((movie) =>
-              display === "grid" ? (
+              displayType === "grid" ? (
                 <MovieCard key={movie.id} layout="aurora" {...movie} />
               ) : (
                 <MovieRow key={movie.id} movie={movie} compact />