improving cache and editor

README.md

@@ -9,6 +9,7 @@
 - [ ] Markdown and cache ( Better code )
 - [ ] Login || LocalStorage and save progress
 - [ ] Next and Prev buttons
+- [ ] Improve phone users experience
 - [x] Themes, theme settings
 
 ---

routes/[...slug].tsx

@@ -65,6 +65,12 @@ export default function CoursePage(
                     dir="ltr"
                     id="editor"
                   >
+                    <p
+                      id="editor-loading"
+                      class="flex h-full items-center justify-center text-lg bg-[#1E1E1E] rounded-lg"
+                    >
+                      جاري تحميل المحرر
+                    </p>
                   </div>
                 </div>
               </div>

routes/group/[slug].tsx

@@ -2,14 +2,12 @@ import { Course, CourseGroup } from "../../utils/types.ts";
 import { Handlers } from "$fresh/server.ts";
 import { PageProps } from "$fresh/server.ts";
 import { Head } from "$fresh/runtime.ts";
-import { cache, populateCache } from "../../utils/course-cache.ts";
+import { cache } from "../../utils/course-cache.ts";
 import CourseCard from "../../components/CourseCard.tsx";
 import Footer from "../../components/Footer.tsx";
 
 import IconChevronDown from "https://deno.land/x/[email protected]/tsx/chevron-down.tsx";
 
-populateCache();
-
 // TODO - FIX TYPES
 export const handler: Handlers<CourseGroup> = {
   GET(_req, ctx) {

routes/index.tsx

@@ -4,13 +4,11 @@ import { PageProps } from "$fresh/server.ts";
 import CourseCard from "../components/CourseCard.tsx";
 import { getCourses } from "../utils/course.ts";
 import { Course, CourseGroup } from "../utils/types.ts";
-import { cache, populateCache } from "../utils/course-cache.ts";
+import { cache } from "../utils/course-cache.ts";
 import Footer from "../components/Footer.tsx";
 
 import IconChevronDown from "https://deno.land/x/[email protected]/tsx/chevron-down.tsx";
 
-populateCache();
-
 export const handler: Handlers<{ courses: (Course | CourseGroup)[] }> = {
   async GET(_req, ctx) {
     const courses = await getCourses(cache);
@@ -72,6 +70,14 @@ export default function BlogIndexPage(
               );
             }
           })}
+          <p class="mt-4 text-2xl">نعمل على الدروس القادما...</p>
+          <a
+            href="https://github.com/TeaByte/NakhlahJS"
+            class="text-gray-500 hover:underline"
+            target="_blank"
+          >
+            هل تود المساهمه في الموقع ؟
+          </a>
         </section>
       </main>
       <Footer />

static/moaco.js

@@ -5,6 +5,7 @@ require.config({
 });
 
 require(["vs/editor/editor.main"], () => {
+  document.getElementById("editor-loading").style.display = "none";
   window.editor = monaco.editor.create(document.getElementById("editor"), {
     language: "javascript",
     theme: "vs-dark",