remove initiallyLoaded

dubinc · Nov 20, 2024 · 234f3e6 · 234f3e6
1 parent 89c11f3
commit 234f3e6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 61 deletions.
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/tags/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/tags/page-client.tsx
@@ -9,13 +9,7 @@ import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
 import { SearchBoxPersisted } from "@/ui/shared/search-box";
 import { PaginationControls } from "@dub/blocks";
 import { CardList, Tag, usePagination, useRouterStuff } from "@dub/ui";
-import {
-  createContext,
-  Dispatch,
-  SetStateAction,
-  useEffect,
-  useState,
-} from "react";
+import { createContext, Dispatch, SetStateAction, useState } from "react";
 import { TagCard } from "./tag-card";
 import { TagCardPlaceholder } from "./tag-card-placeholder";
 
@@ -47,12 +41,6 @@ export default function WorkspaceTagsClient() {
     query: { search: search ?? "" },
   });
 
-  // Whether the initial tags have already loaded, for some loading states like the search box
-  const [initiallyLoaded, setInitiallyLoaded] = useState(false);
-  useEffect(() => {
-    if (!loading && tags) setInitiallyLoaded(true);
-  }, [tags, loading]);
-
   const [openMenuTagId, setOpenMenuTagId] = useState<string | null>(null);
 
   return (
@@ -62,26 +50,17 @@ export default function WorkspaceTagsClient() {
         {loading || tags?.length ? (
           <>
             <div className="flex w-full flex-wrap items-center justify-between gap-3 gap-6 sm:w-auto">
-              {initiallyLoaded ? (
-                <>
-                  <SearchBoxPersisted
-                    loading={loading}
-                    onChangeDebounced={(t) => {
-                      if (t) {
-                        queryParams({ set: { search: t }, del: "page" });
-                      } else {
-                        queryParams({ del: "search" });
-                      }
-                    }}
-                  />
-                  <AddTagButton />
-                </>
-              ) : (
-                <>
-                  <div className="h-[38px] w-20 animate-pulse rounded-md bg-gray-100 md:w-60" />
-                  <div className="h-9 w-24 animate-pulse rounded-md bg-gray-100" />
-                </>
-              )}
+              <SearchBoxPersisted
+                loading={loading}
+                onChangeDebounced={(t) => {
+                  if (t) {
+                    queryParams({ set: { search: t }, del: "page" });
+                  } else {
+                    queryParams({ del: "search" });
+                  }
+                }}
+              />
+              <AddTagButton />
             </div>
 
             <TagsListContext.Provider
@@ -95,16 +74,14 @@ export default function WorkspaceTagsClient() {
                     ))}
               </CardList>
             </TagsListContext.Provider>
-            {initiallyLoaded && (
-              <div className="sticky bottom-0 rounded-b-[inherit] border-t border-gray-200 bg-white px-3.5 py-2">
-                <PaginationControls
-                  pagination={pagination}
-                  setPagination={setPagination}
-                  totalCount={tagsCount || 0}
-                  unit={(p) => `tag${p ? "s" : ""}`}
-                />
-              </div>
-            )}
+            <div className="sticky bottom-0 rounded-b-[inherit] border-t border-gray-200 bg-white px-3.5 py-2">
+              <PaginationControls
+                pagination={pagination}
+                setPagination={setPagination}
+                totalCount={tagsCount || 0}
+                unit={(p) => `tag${p ? "s" : ""}`}
+              />
+            </div>
           </>
         ) : (
           <AnimatedEmptyState

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/utm/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/utm/page-client.tsx
@@ -6,13 +6,7 @@ import { useAddEditUtmTemplateModal } from "@/ui/modals/add-edit-utm-template.mo
 import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
 import { CardList, DiamondTurnRight, Flag6, GlobePointer } from "@dub/ui";
 import { fetcher } from "@dub/utils";
-import {
-  Dispatch,
-  SetStateAction,
-  createContext,
-  useEffect,
-  useState,
-} from "react";
+import { Dispatch, SetStateAction, createContext, useState } from "react";
 import useSWR from "swr";
 import { TemplateCard } from "./template-card";
 import { TemplateCardPlaceholder } from "./template-card-placeholder";
@@ -36,12 +30,6 @@ export default function WorkspaceUtmTemplatesClient() {
     },
   );
 
-  // Whether the initial tags have already loaded, for some loading states like the search box
-  const [initiallyLoaded, setInitiallyLoaded] = useState(false);
-  useEffect(() => {
-    if (!isLoading && templates) setInitiallyLoaded(true);
-  }, [templates, isLoading]);
-
   const [openMenuTemplateId, setOpenMenuTemplateId] = useState<string | null>(
     null,
   );
@@ -57,11 +45,7 @@ export default function WorkspaceUtmTemplatesClient() {
         {isLoading || templates?.length ? (
           <>
             <div className="flex justify-end gap-6">
-              {initiallyLoaded ? (
-                <AddUtmTemplateButton />
-              ) : (
-                <div className="h-9 w-32 animate-pulse rounded-md bg-gray-100" />
-              )}
+              <AddUtmTemplateButton />
             </div>
             <TemplatesListContext.Provider
               value={{ openMenuTemplateId, setOpenMenuTemplateId }}