diff --git a/web/packages/new/photos/pages/duplicates.tsx b/web/packages/new/photos/pages/duplicates.tsx
index b4e36be8cc..14c940a241 100644
--- a/web/packages/new/photos/pages/duplicates.tsx
+++ b/web/packages/new/photos/pages/duplicates.tsx
@@ -6,29 +6,48 @@ import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import SortIcon from "@mui/icons-material/Sort";
 import { Box, IconButton, Stack, Typography } from "@mui/material";
 import { useRouter } from "next/router";
-import React, { useEffect } from "react";
+import React, { useEffect, useReducer } from "react";
 import type { DuplicateGroup } from "../services/dedup";
 import { useAppContext } from "../types/context";
 
 const Page: React.FC = () => {
     const { showNavBar } = useAppContext();
 
+    const [state, dispatch] = useReducer(dedupReducer, initialDedupState);
+
     useEffect(() => {
         showNavBar(false);
+        console.log(dispatch);
     }, []);
 
+    const contents = (() => {
+        switch (state.status) {
+            case undefined:
+            case "analyzing":
+                return <Loading />;
+            default:
+                return <Loading />;
+        }
+    })();
+
     return (
         <Stack sx={{ flex: 1 }}>
             <Navbar />
-            <Contents />
+            {contents}
         </Stack>
     );
 };
 
 export default Page;
 
-interface DuplicatesState {
-    status: "analyzing" | "deleting" | undefined;
+interface DedupState {
+    status:
+        | undefined
+        | "analyzing"
+        | "analysisFailed"
+        | "showingResults"
+        | "deleting"
+        | "deletionFailed";
     /**
      * Groups of duplicates.
      *
@@ -43,7 +62,7 @@ interface DuplicatesState {
     /**
      * The attribute to use for sorting {@link duplicateGroups}.
      */
-    sortType: "prunableCount" | "prunableSize";
+    sortOrder: "prunableCount" | "prunableSize";
     /**
      * The number of files that will be pruned if the user decides to dedup the
      * current selection.
@@ -56,6 +75,36 @@ interface DuplicatesState {
     prunableSize: number;
 }
 
+type DedupAction =
+    | { type: "analyze" }
+    | { type: "analysisFailed" }
+    | { type: "analyzed"; duplicateGroups: DuplicateGroup[] }
+    | { type: "changeSortOrder"; sortOrder: DedupState["sortOrder"] }
+    | { type: "select"; index: number }
+    | { type: "deselect"; index: number }
+    | { type: "deselectAll" }
+    | { type: "dedup" }
+    | { type: "dedupCompleted" }
+    | { type: "dedupFailed" };
+
+const initialDedupState: DedupState = {
+    status: undefined,
+    duplicateGroups: [],
+    sortOrder: "prunableSize",
+    prunableCount: 0,
+    prunableSize: 0,
+};
+
+const dedupReducer: React.Reducer<DedupState, DedupAction> = (
+    state,
+    action,
+) => {
+    switch (action.type) {
+        default:
+            return state;
+    }
+};
+
 const Navbar: React.FC = () => {
     const router = useRouter();
 
@@ -87,7 +136,7 @@ const Navbar: React.FC = () => {
     );
 };
 
-const Contents: React.FC = () => {
+const Loading: React.FC = () => {
     return (
         <VerticallyCentered>
             <ActivityIndicator />