improved application loading performance

julesgrc0 · Jun 26, 2023 · 9e9bc7c · 9e9bc7c
1 parent 711faca
commit 9e9bc7c
Show file tree

Hide file tree

Showing 15 changed files with 228 additions and 124 deletions.
diff --git a/android/app/src/main/java/com/fouflix/julesg10/MainActivity.java b/android/app/src/main/java/com/fouflix/julesg10/MainActivity.java
@@ -3,7 +3,10 @@
 import android.content.Context;
 import android.content.Intent;
 import android.graphics.Color;
+import android.os.Build;
 import android.os.Bundle;
+import android.view.Window;
+import android.view.WindowManager;
 import android.webkit.CookieManager;
 import android.webkit.WebSettings;
 import android.webkit.WebView;
@@ -12,6 +15,7 @@
 import androidx.core.content.pm.ShortcutInfoCompat;
 import androidx.core.content.pm.ShortcutManagerCompat;
 import androidx.core.graphics.drawable.IconCompat;
+import androidx.core.view.WindowCompat;
 
 import com.getcapacitor.BridgeActivity;
 import com.getcapacitor.JSObject;
@@ -29,8 +33,26 @@ public class MainActivity extends BridgeActivity {
     protected void onCreate(Bundle savedInstanceState) {
         this.registerPlugin(FlouFlixPlugin.class);
         super.onCreate(savedInstanceState);
+
+        int darkBg = Color.rgb(20,20,20);
+        this.getBridge().getWebView().setBackgroundColor(Color.TRANSPARENT);
+
+
+        Window window = this.getWindow();
+        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
+        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
+        window.setStatusBarColor(darkBg);
+
+        WindowCompat.setDecorFitsSystemWindows(window, false);
+        window.setNavigationBarColor(Color.TRANSPARENT);
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+            window.setNavigationBarContrastEnforced(false);
+        }
+        window.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
+
         CastContext.getSharedInstance(this);
 
+
         Intent intent = getIntent();
         if(intent == null)
         {

diff --git a/index.html b/index.html
@@ -19,6 +19,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx" defer></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && npx cap sync",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -33,6 +33,7 @@
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@vitejs/plugin-react": "^3.1.0",
-    "vite": "^4.1.0"
+    "vite": "^4.1.0",
+    "vite-plugin-compression": "^0.5.1"
   }
 }
diff --git a/src/components/CardDrawer.tsx b/src/components/CardDrawer.tsx
@@ -97,7 +97,7 @@ const CardDrawer: React.FC<CardDrawerProps> = ({
                     <Image
                         src={item.image}
                         onError={(evt: any) => {
-                            evt.target.src = "https://picsum.photos/720/480";
+                            evt.target.src = "https://picsum.photos/420/280";
                         }}
                         w="100%"
                         h={"280px"}

diff --git a/src/components/CardItem.tsx b/src/components/CardItem.tsx
@@ -44,10 +44,11 @@ const CardItem: React.FC<CardItemProps> = ({ item, delay, openCard }) => {
                         }}
                         onLoad={(evt: any)=>{
                             setShowImage(true);
+
                         }}
                         filter={imageShow ? "blur(0px)" : "blur(100px)"}
                         borderRadius="lg"
-                        transition={"300ms"}
+                        transition={"600ms"}
                         w="100%"
                         h={"280px"}
                         objectFit={"cover"}

diff --git a/src/components/CreateDrawer.tsx b/src/components/CreateDrawer.tsx
@@ -58,6 +58,7 @@ const EditDrawer: React.FC<EditDrawerProps> = ({
         url: undefined,
         index: -1,
     });
+    const [imageShow, setShowImage] = React.useState<boolean>(false);
 
     React.useEffect(() => {
         if (!isCreateOpen) {
@@ -183,7 +184,12 @@ const EditDrawer: React.FC<EditDrawerProps> = ({
                         onError={(evt: any) => {
                             evt.target.src = "https://picsum.photos/720/480";
                         }}
+                        onLoad={(evt: any) => {
+                            setShowImage(true);
+                        }}
+                        filter={imageShow ? "blur(0px)" : "blur(100px)"}
                         borderRadius="lg"
+                        transition={"300ms"}
                         w="100%"
                         h={"280px"}
                         objectFit={"cover"}

diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
diff --git a/src/components/ScrollCards.tsx b/src/components/ScrollCards.tsx
@@ -1,16 +1,19 @@
 import React from "react";
-import { Box } from "@chakra-ui/react";
-import { FlouFlix } from '../plugin/index';
-import { useNetwork } from '../hooks/useNetwork';
-import { Item, storage } from '../api/storage';
 import { useNavigate } from "react-router-dom";
+import { Box } from "@chakra-ui/react";
 import { Capacitor } from "@capacitor/core";
 import { StatusBar } from "@capacitor/status-bar";
 import { NavigationBar } from "@hugotomazi/capacitor-navigation-bar";
 
-import CardItem from "./CardItem";
+import { FlouFlix } from '../plugin/index';
+
+import { useNetwork } from '../hooks/useNetwork';
+import { Item, storage } from '../api/storage';
+
+
+const CardItem = React.lazy(() => import("./CardItem"));
 
-type ScrollCardsProps ={
+type ScrollCardsProps = {
   setShowBorder: (show: boolean) => void;
   setCardOpen: (open: boolean) => void;
   setCreateOpen: (open: boolean) => void;
@@ -60,22 +63,21 @@ const ScrollCards: React.FC<ScrollCardsProps> = ({
 
     FlouFlix.addListener("onTextDataShared", (data) => {
       setCreateOpen(false);
-      if (data.text != null)
-      {
+      if (data.text != null) {
         storage.extractVideo(data.text).then(async video => {
           await storage.createItem({
             title: data.text,
             videos: [storage.createVideoItem(data.text ?? "", video)]
           })
           storage.getItems().then((items) => setItems(items))
         }).catch(() => { })
-      
+
       } else if (data.file != null) {
-      
+
         storage.parseFile(data.file.split("\n")).then(() => {
           storage.getItems().then((items) => setItems(items))
         }).catch(() => { })
-      
+
       }
     })
 
@@ -112,7 +114,7 @@ const ScrollCards: React.FC<ScrollCardsProps> = ({
         }
       }}
     >
-      <React.Fragment>
+      <React.Suspense>
         {items.map((it, index) => (
           <CardItem
             key={index}
@@ -124,11 +126,11 @@ const ScrollCards: React.FC<ScrollCardsProps> = ({
             }}
           />
         ))}
-      </React.Fragment>
+      </React.Suspense>
 
       <Box w="100%" h="40px"></Box>
     </Box>
   );
 }
 
-export default  ScrollCards;
+export default ScrollCards;
diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx
@@ -16,6 +16,7 @@ const Topbar: React.FC<TopBarProps> = ({ title, showBorder, icons }) => {
     return (
         <Flex
             padding={5}
+            paddingTop={10}
             columnGap={5}
             justifyContent="space-between"
             borderBottom={"2px solid"}

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,20 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
-import { ChakraProvider, extendTheme } from '@chakra-ui/react';
-import App from './pages/App';
-
-const theme= extendTheme({})
-
-const root = document.getElementById('root');
-if(root)
-{
-  ReactDOM.createRoot(root).render(
-    <React.StrictMode>
-      <ChakraProvider theme={theme}>
-        <App />
-      </ChakraProvider>
-    </React.StrictMode>,
-  )
-}
+import('./pages/App').then((app)=>{
+  ReactDOM.createRoot(document.getElementById('root') ?? document.createElement("div"))
+    .render(
+      <React.StrictMode>
+        <app.default />
+      </React.StrictMode>,
+    )
+})