Skip to content

Commit 3ba6523

Browse files
medyomedyo
committed
fix an animation glitch on load
1 parent 0278847 commit 3ba6523

7 files changed

Lines changed: 47 additions & 26 deletions

File tree

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<title>New Tab</title>
1717
<% } %>
1818
</head>
19-
<body>
19+
<body class="preload">
2020
<noscript>You need to enable JavaScript to run this app.</noscript>
2121
<div id="root"></div>
2222
</body>

‎public/startup.js‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,23 @@
11
// Blocking script to avoid the initial background flickering (switching from light to dark)
22
// https://stackoverflow.com/a/63033934/3495717
3+
4+
function isDNDModeActive(DNDDuration) {
5+
console.log(DNDDuration)
6+
if (DNDDuration === 'always') {
7+
return true
8+
} else if (typeof DNDDuration === 'number') {
9+
return Boolean(DNDDuration && DNDDuration - new Date().getTime() > 0)
10+
} else {
11+
return false
12+
}
13+
}
314
try {
4-
var theme = JSON.parse(localStorage.preferences_storage).theme || 'dark'
15+
var state = JSON.parse(localStorage.preferences_storage).state
16+
var theme = state.theme || 'dark'
517
document.documentElement.classList.add(theme)
6-
} catch (e) {
7-
console.log(e)
8-
}
18+
19+
var DNDDuration = state.DNDDuration || 0
20+
if (isDNDModeActive(DNDDuration)) {
21+
document.documentElement.classList.add('dndState')
22+
}
23+
} catch (e) {}

‎src/App.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ function App() {
2525
markOnboardingAsCompleted,
2626
maxVisibleCards,
2727
isDNDModeActive,
28-
DNDDurarion,
28+
DNDDuration,
2929
} = useUserPreferences()
3030

3131
useLayoutEffect(() => {
@@ -43,13 +43,14 @@ function App() {
4343
}, [maxVisibleCards])
4444

4545
useEffect(() => {
46+
document.body.classList.remove('preload')
4647
setupAnalytics()
4748
setupIdentification()
4849
}, [])
4950

5051
useEffect(() => {
5152
trackPageView('home', isDNDModeActive())
52-
}, [DNDDurarion, isDNDModeActive])
53+
}, [DNDDuration, isDNDModeActive])
5354

5455
const callback = (entries) => {
5556
entries.forEach((entry) => {
@@ -76,7 +77,7 @@ function App() {
7677
return () => {
7778
observer.disconnect()
7879
}
79-
}, [DNDDurarion])
80+
}, [DNDDuration])
8081

8182
return (
8283
<>

‎src/assets/App.css‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ body {
1010
font-family: 'nunito';
1111
font-size: 100%;
1212
}
13+
1314
.transitionBgColor {
1415
transition: background-color 0.3s ease-in-out;
1516
}
@@ -494,6 +495,7 @@ a {
494495
flex-wrap: wrap;
495496
gap: 4px;
496497
margin-top: 24px;
498+
transition: all 0.3s ease-out;
497499
}
498500

499501
.tag {
@@ -776,7 +778,7 @@ Producthunt item
776778
position: relative;
777779
margin: 0 auto;
778780
margin-top: 6px;
779-
transition: all 0.3s linear;
781+
transition: all 0.3s ease-out;
780782
}
781783
.searchBarIcon {
782784
position: absolute;
@@ -1142,12 +1144,6 @@ Producthunt item
11421144
scroll-snap-align: end;
11431145
}
11441146

1145-
.tags {
1146-
transition: visibility 0.3s ease-out, opacity 0.3s ease-in;
1147-
visibility: visible;
1148-
opacity: 1;
1149-
}
1150-
11511147
/*Helpers */
11521148
.noMargin {
11531149
margin: 0 !important;
@@ -1163,3 +1159,10 @@ Producthunt item
11631159
.hideScrollBar::-webkit-scrollbar {
11641160
display: none;
11651161
}
1162+
1163+
.preload * {
1164+
-webkit-transition: none !important;
1165+
-moz-transition: none !important;
1166+
-ms-transition: none !important;
1167+
-o-transition: none !important;
1168+
}

‎src/components/Layout/DNDLayout/DNDLayout.css‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
.dndState .AppHeader .searchBar {
2-
opacity: 0;
2+
visibility: hidden;
33
transform: translate(0, 10px);
4-
transition: all 0.4s ease-out;
54
}
65
.dndState .tags {
7-
opacity: 0;
6+
visibility: hidden;
87
transform: translate(0, 10px);
98
filter: blur(2px);
10-
transition: all 0.4s ease-out;
119
}
1210

1311
.DNDContent {
@@ -17,6 +15,9 @@
1715
align-items: center;
1816
justify-content: center;
1917
}
18+
.dndState .scrollToCardsLayout {
19+
visibility: visible;
20+
}
2021

2122
.scrollToCardsLayout {
2223
display: flex;
@@ -29,11 +30,12 @@
2930
color: var(--primary-text-color);
3031
cursor: pointer;
3132
padding: 20px 0;
33+
visibility: hidden;
34+
transition: all 0.2s ease-in;
3235
}
3336

3437
.scrollToCardsLayout:hover .icon {
3538
transform: translate(0, 10px);
36-
transition: transform 0.3s ease-in-out;
3739
animation-iteration-count: revert;
3840
}
3941
.scrollToCardsLayout .icon {

‎src/features/settings/components/DNDSettings.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ type DNDSettingsProps = {
2222
export const DNDSettings = ({ setShowSettings }: DNDSettingsProps) => {
2323
const [selectedDNDDuration, setSelectedDNDDuration] = useState<DndOption['value']>()
2424

25-
const { DNDDurarion, setDNDDuration } = useUserPreferences()
25+
const { DNDDuration, setDNDDuration } = useUserPreferences()
2626

2727
const onApplyClicked = () => {
2828
if (!selectedDNDDuration) {
@@ -65,7 +65,7 @@ export const DNDSettings = ({ setShowSettings }: DNDSettingsProps) => {
6565
isMulti={false}
6666
isClearable={false}
6767
isSearchable={false}
68-
value={DNDDurations.find((e) => e.value === DNDDurarion)}
68+
value={DNDDurations.find((e) => e.value === DNDDuration)}
6969
classNamePrefix={'hackertab'}
7070
onChange={onPeriodSelect}
7171
/>

‎src/stores/preferences.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export type UserPreferencesState = {
1919
cardsSettings: Record<string, CardSettingsType>
2020
firstSeenDate: number
2121
userCustomCards: SupportedCardType[]
22-
DNDDurarion: number | "always"
22+
DNDDuration: number | "always"
2323
}
2424

2525
type UserPreferencesStoreActions = {
@@ -59,7 +59,7 @@ export const useUserPreferences = create(
5959
{ id: 3, name: 'producthunt', type: 'supported' },
6060
],
6161
userCustomCards: [],
62-
DNDDurarion: 0,
62+
DNDDuration: 0,
6363
setSearchEngine: (searchEngine: string) => set({ searchEngine: searchEngine }),
6464
setListingMode: (listingMode: ListingMode) => set({ listingMode: listingMode }),
6565
setTheme: (theme: Theme) => set({ theme: theme }),
@@ -95,9 +95,9 @@ export const useUserPreferences = create(
9595

9696
return { cards: newState }
9797
}),
98-
setDNDDuration: (value) => set({ DNDDurarion: value }),
98+
setDNDDuration: (value) => set({ DNDDuration: value }),
9999
isDNDModeActive: () => {
100-
const duration = get().DNDDurarion
100+
const duration = get().DNDDuration
101101
if (duration === "always") {
102102
return true;
103103
}

0 commit comments

Comments
 (0)