Skip to content

Commit 4218c34

Browse files
emrecppemrecpp
committed
Reduced animations and fixed flickering issue
1 parent c3b2453 commit 4218c34

11 files changed

Lines changed: 136 additions & 106 deletions

File tree

‎src/app/App.tsx‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,23 @@ export default function App() {
1313

1414
useEffect(() => {
1515
const initializeExtension = async () => {
16-
const savedCookies = localStorage.getItem(STORAGE_KEY)
17-
if (!savedCookies) return
18-
19-
const {tabs} = await getTabInfo()
20-
const data = JSON.parse(savedCookies)
21-
22-
setCookies(data.cookies)
23-
setSwaggers(data.swaggers)
24-
25-
const {isSwagger} = await sendMessage("isSwagger", {})
26-
setCurrentView(isSwagger ? "list-swaggers" : "list-cookies")
27-
16+
try {
17+
const {isSwagger} = await sendMessage("isSwagger", {})
18+
setCurrentView(isSwagger ? "list-swaggers" : "list-cookies")
19+
20+
const savedCookies = localStorage.getItem(STORAGE_KEY)
21+
if (savedCookies) {
22+
const data = JSON.parse(savedCookies)
23+
setCookies(data.cookies || [])
24+
setSwaggers(data.swaggers || [])
25+
}
26+
} catch (error) {
27+
console.error('Initialization error:', error)
28+
setCurrentView("list-cookies")
29+
}
2830
}
2931

30-
initializeExtension().catch(console.error)
31-
32-
return () => {
33-
}
32+
initializeExtension()
3433
}, [])
3534

3635
useEffectAfterMount(() => {

‎src/app/components/Header.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ export function Header() {
5454
className="flex justify-between items-center select-none py-3"
5555
initial={{opacity: 0, y: -20}}
5656
animate={{opacity: 1, y: 0}}
57-
transition={{duration: 0.5}}>
57+
transition={{duration: 0}}
58+
>
5859
<motion.h1
5960
className="text-lg font-bold flex items-center cursor-pointer text-slate-800"
6061
whileHover={{scale: 1.05}}

‎src/app/components/cookie/CookieForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export function CookieForm() {
5454
initial={{opacity: 0}}
5555
animate={{opacity: 1}}
5656
exit={{opacity: 0}}
57-
transition={{duration: 0.3}}
57+
transition={{duration: 0.2}}
5858
className="w-full h-full"
5959
>
6060
<FormLayout

‎src/app/components/shared/DataTable.tsx‎

Lines changed: 91 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,19 @@ export default function DataTable<T extends DataType>({
2929
const {settings, activeProject, setActiveProject, setCurrentView,
3030
searchTerm, clearSearchTerm} = useGlobalContext()
3131

32+
const hasStoredData = () => {
33+
const stored = localStorage.getItem('Cookify')
34+
if (!stored) return false
35+
try {
36+
const data = JSON.parse(stored)
37+
return (data.cookies && data.cookies.length > 0) || (data.swaggers && data.swaggers.length > 0)
38+
} catch {
39+
return false
40+
}
41+
}
42+
43+
const shouldShowNoResults = data.length === 0 && (!hasStoredData() || searchTerm || activeProject)
44+
3245
const handleDragEnd = (result: any) => {
3346
if (!result.destination || !onReorder) return
3447
onReorder(result.source.index, result.destination.index)
@@ -54,91 +67,88 @@ export default function DataTable<T extends DataType>({
5467
setCurrentView(type === 'cookie' ? 'add-cookie' : 'add-swagger');
5568
}
5669

57-
5870
return (
59-
<div className="w-full h-full flex flex-col">
60-
<div className="sticky top-0 z-20 bg-background">
61-
<Table>
62-
<TableHeader>
63-
{renderHeaders()}
64-
</TableHeader>
65-
</Table>
66-
</div>
71+
<div className="w-full h-full flex flex-col overflow-hidden">
6772
<DragDropContext onDragEnd={handleDragEnd}>
68-
<Table>
69-
<Droppable droppableId={type === 'cookie' ? 'cookies' : 'swaggers'}>
70-
{(provided) => (
71-
<TableBody
72-
{...provided.droppableProps}
73-
ref={provided.innerRef}
74-
>
75-
{data.length === 0 ? (
76-
<TableRow>
77-
<TableCell colSpan={5} className="text-center py-4 text-muted-foreground">
78-
<div className="flex flex-col items-center justify-center gap-2">
79-
<div className="flex items-center gap-2">
80-
<Search className="w-4 h-4"/>
81-
No results found.
73+
<div className="relative overflow-auto">
74+
<Table>
75+
<TableHeader className="sticky top-0 z-20 bg-background">
76+
{renderHeaders()}
77+
</TableHeader>
78+
<Droppable droppableId={type === 'cookie' ? 'cookies' : 'swaggers'}>
79+
{(provided) => (
80+
<TableBody
81+
{...provided.droppableProps}
82+
ref={provided.innerRef}
83+
>
84+
{shouldShowNoResults ? (
85+
<TableRow>
86+
<TableCell colSpan={5} className="text-center py-4 text-muted-foreground">
87+
<div className="flex flex-col items-center justify-center gap-2">
88+
<div className="flex items-center gap-2">
89+
<Search className="w-4 h-4"/>
90+
No results found.
91+
</div>
92+
{searchTerm && clearSearchTerm ? (
93+
<Button
94+
variant="outline"
95+
size="sm"
96+
onClick={clearSearchTerm}
97+
className="mt-2 text-xs w-40 flex items-center gap-1"
98+
>
99+
<BrushCleaning className="w-4 h-4 mr-1"/>
100+
Clear <b>Search</b> filter
101+
</Button>
102+
) : activeProject ? (
103+
<Button
104+
variant="outline"
105+
size="sm"
106+
onClick={handleClearProjectFilter}
107+
className="mt-2 text-xs w-40 flex items-center gap-1"
108+
>
109+
<BrushCleaning className="w-4 h-4 mr-1"/>
110+
Clear <b>Project</b> filter
111+
</Button>
112+
) : originalDataLength === 0 ? (
113+
<Button
114+
variant="default"
115+
size="sm"
116+
onClick={handleAddNew}
117+
className="mt-2 flex items-center gap-2 text-xs w-40"
118+
>
119+
<PlusCircle className="w-4 h-4"/>
120+
Add new {type}
121+
</Button>
122+
) : null}
82123
</div>
83-
{activeProject ? (
84-
<Button
85-
variant="outline"
86-
size="sm"
87-
onClick={handleClearProjectFilter}
88-
className="mt-2 text-xs w-40 flex items-center gap-1"
89-
>
90-
<BrushCleaning className="w-4 h-4 mr-1"/>
91-
Clear <b>Project</b> filter
92-
</Button>
93-
) : searchTerm && clearSearchTerm ? (
94-
<Button
95-
variant="outline"
96-
size="sm"
97-
onClick={clearSearchTerm}
98-
className="mt-2 text-xs w-40 flex items-center gap-1"
99-
>
100-
<BrushCleaning className="w-4 h-4 mr-1"/>
101-
Clear <b>Search</b> filter
102-
</Button>
103-
) : originalDataLength === 0 ? (
104-
<Button
105-
variant="default"
106-
size="sm"
107-
onClick={handleAddNew}
108-
className="mt-2 flex items-center gap-2 text-xs w-40"
124+
</TableCell>
125+
</TableRow>
126+
) : (
127+
data.map((item, index) => (
128+
<Draggable
129+
key={item.project + "-"+ item.alias}
130+
draggableId={item.alias}
131+
index={index}
132+
>
133+
{(provided) => (
134+
<TableRow
135+
ref={provided.innerRef}
136+
{...provided.draggableProps}
137+
className={`${settings.applyOnClick ? "cursor-pointer" : "cursor-default"} transition-colors hover:bg-accent/50`}
138+
onClick={() => handleRowClick(item)}
109139
>
110-
<PlusCircle className="w-4 h-4"/>
111-
Add new {type}
112-
</Button>
113-
) : null}
114-
</div>
115-
</TableCell>
116-
</TableRow>
117-
) : (
118-
data.map((item, index) => (
119-
<Draggable
120-
key={item.project + "-"+ item.alias}
121-
draggableId={item.alias}
122-
index={index}
123-
>
124-
{(provided) => (
125-
<TableRow
126-
ref={provided.innerRef}
127-
{...provided.draggableProps}
128-
className={`${settings.applyOnClick ? "cursor-pointer" : "cursor-default"} transition-colors hover:bg-accent/50`}
129-
onClick={() => handleRowClick(item)}
130-
>
131-
{renderCells(item, index, provided.dragHandleProps)}
132-
</TableRow>
133-
)}
134-
</Draggable>
135-
))
136-
)}
137-
{provided.placeholder}
138-
</TableBody>
139-
)}
140-
</Droppable>
141-
</Table>
140+
{renderCells(item, index, provided.dragHandleProps)}
141+
</TableRow>
142+
)}
143+
</Draggable>
144+
))
145+
)}
146+
{provided.placeholder}
147+
</TableBody>
148+
)}
149+
</Droppable>
150+
</Table>
151+
</div>
142152
</DragDropContext>
143153
</div>
144154
)

‎src/app/components/swagger/SwaggerForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export function SwaggerForm() {
5151
initial={{opacity: 0}}
5252
animate={{opacity: 1}}
5353
exit={{opacity: 0}}
54-
transition={{duration: 0.3}}
54+
transition={{duration: 0.2}}
5555
className="w-full h-full"
5656
>
5757
<FormLayout

‎src/app/pages/CookiesMainPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const CookiesMainPage = () => {
1313
initial={{opacity: 0}}
1414
animate={{opacity: 1}}
1515
exit={{opacity: 0}}
16-
transition={{duration: 0.3}}
16+
transition={{duration: 0}}
1717
>
1818
<CookieList/>
1919
</motion.div>

‎src/app/pages/SettingsPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export function SettingsPage() {
6767
initial={{opacity: 0}}
6868
animate={{opacity: 1}}
6969
exit={{opacity: 0}}
70-
transition={{duration: 0.3}}
70+
transition={{duration: 0.25}}
7171
className="w-full overflow-hidden"
7272
>
7373
<div className="container mx-auto px-2 pt-4 pb-8 flex flex-col gap-3">

‎src/app/pages/SwaggerMainPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const SwaggerMainPage = () => {
1212
initial={{opacity: 0}}
1313
animate={{opacity: 1}}
1414
exit={{opacity: 0}}
15-
transition={{duration: 0.3}}
15+
transition={{duration: 0}}
1616
className="w-full overflow-hidden min-h-[300px] h-full"
1717
>
1818
<SwaggerList/>

‎src/app/pages/TabPages.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ import { Cookie, Settings } from "lucide-react";
1212
export default function TabPages() {
1313
const {currentView, setCurrentView} = useGlobalContext()
1414

15+
// for fix the flicker
16+
if (currentView === null)
17+
return null
18+
19+
1520
const handleTabChange = (value: string) => {
1621
if (["list-cookies", "list-swaggers", "settings"].includes(value)) {
1722
setCurrentView(value);
@@ -40,7 +45,7 @@ export default function TabPages() {
4045
</Tabs>
4146
</div>
4247

43-
<div className="select-none fixed bottom-0 left-0 right-0 border-t bg-background pt-3 pb-4 max-w-[700px] mx-auto shadow-[0_-2px_10px_rgba(0,0,0,0.05)]">
48+
<div className="select-none fixed bottom-0 left-0 right-0 border-t bg-background pt-3 pb-4 max-w-[700px] mx-auto">
4449
<Tabs value={currentView} onValueChange={handleTabChange}>
4550
<TabsList className="w-full rounded-none bg-transparent px-6">
4651
<div className="flex justify-between w-full max-w-[300px] mx-auto">

‎src/context/global-context.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,8 @@ interface GlobalContextState {
5454
clearSearchTerm(): void;
5555

5656
handleImport(importedData?: any): void;
57+
58+
isInitialized: boolean;
5759
}
5860

5961
export const GlobalContext = createContext<GlobalContextState | any>(undefined);
@@ -67,7 +69,7 @@ interface ExtendedSettings extends Settings {
6769
}
6870

6971
export const GlobalContextProvider: React.FC<GlobalContextProps> = ({children}) => {
70-
const [currentView, setCurrentView] = useState<PageViewTypes>('list-cookies')
72+
const [currentView, setCurrentView] = useState<PageViewTypes>(null)
7173

7274
const [cookies, setCookiesState] = useState<CookieData[]>([])
7375
const [swaggers, setSwaggersState] = useState<SwaggerData[]>([])
@@ -256,6 +258,16 @@ export const GlobalContextProvider: React.FC<GlobalContextProps> = ({children})
256258
};
257259

258260
const changeView = (newView: PageViewTypes) => {
261+
if (newView === null) {
262+
setCurrentView(null);
263+
return;
264+
}
265+
266+
if (currentView === null) {
267+
setCurrentView(newView);
268+
return;
269+
}
270+
259271
const currentGroup = getPageGroup(currentView);
260272
const targetGroup = getPageGroup(newView);
261273

@@ -316,6 +328,7 @@ export const GlobalContextProvider: React.FC<GlobalContextProps> = ({children})
316328
activeProject, setActiveProject,
317329
searchTerm, setSearchTerm, clearSearchTerm,
318330
handleImport,
331+
isInitialized: true,
319332
}}>
320333
{children}
321334
</GlobalContext.Provider>

0 commit comments

Comments
 (0)