feat: add history lazy loading

ttuanhung · Sep 23, 2019 · e13d94e · e13d94e
1 parent 700160d
commit e13d94e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -79,7 +79,7 @@
     "react-windows-controls": "1.1.1",
     "styled-components": "^5.0.0-beta.8",
     "tldts-experimental": "5.4.1",
-    "ts-loader": "^6.1.0",
+    "ts-loader": "^6.1.2",
     "typescript": "3.6.3",
     "v8-compile-cache": "^2.1.0",
     "webpack": "4.40.2",

diff --git a/src/renderer/views/history/components/App/index.tsx b/src/renderer/views/history/components/App/index.tsx
@@ -12,6 +12,15 @@ import { Container, Content, LeftContent } from '~/renderer/components/Pages';
 
 const GlobalStyle = createGlobalStyle`${Style}`;
 
+const onScroll = (e: any) => {
+  const scrollPos = e.target.scrollTop;
+  const scrollMax = e.target.scrollHeight - e.target.clientHeight - 256;
+
+  if (scrollPos >= scrollMax) {
+    store.itemsLoaded += store.getDefaultLoaded();
+  }
+};
+
 const RangeItem = observer(
   ({ range, children }: { range: QuickRange; children: any }) => (
     <NavigationDrawer.Item
@@ -77,7 +86,7 @@ export default observer(() => {
             Clear browsing data
           </NavigationDrawer.Item>
         </NavigationDrawer>
-        <Content>
+        <Content onScroll={onScroll}>
           <HistorySections />
         </Content>
       </Container>

diff --git a/src/renderer/views/menu/store/index.ts b/src/renderer/views/menu/store/index.ts
@@ -12,7 +12,7 @@ export class Store {
   public settings: ISettings = DEFAULT_SETTINGS;
 
   @observable
-  public visible = true;
+  public visible = false;
 
   @observable
   public id = remote.getCurrentWebContents().id;
@@ -22,10 +22,6 @@ export class Store {
       this.visible = flag;
     });
 
-    setTimeout(() => {
-      this.visible = false;
-    });
-
     window.addEventListener('blur', () => {
       if (this.visible) {
         setTimeout(() => {

diff --git a/src/renderer/views/settings/components/App/index.tsx b/src/renderer/views/settings/components/App/index.tsx
@@ -63,7 +63,7 @@ export default observer(() => {
           {/* <MenuItem section="system">System</MenuItem> */}
         </NavigationDrawer>
         <Content>
-          <LeftContent>
+          <LeftContent style={{ maxWidth: 800 }}>
             {selectedSection === 'appearance' && <Appearance />}
             {selectedSection === 'autofill' && <Autofill />}
             {selectedSection === 'address-bar' && <AddressBar />}