fix data loading

src/api/get-apps.ts

@@ -0,0 +1,20 @@
+import { createResource, lazy } from 'solid-js';
+import { AppDefinition } from '~/types';
+
+async function getApps(): Promise<AppDefinition[]> {
+  return await import('../../data/apps.json').then((m) => m.default);
+}
+
+export function createApps() {
+  const [apps] = createResource<AppDefinition[]>(getApps);
+  return apps;
+}
+
+export async function getTagOrder(): Promise<string[]> {
+  return await import('../../data/tag-order.json').then((m) => m.default);
+}
+
+export function createTagOrder() {
+  const [tagOrder] = createResource<string[]>(getTagOrder);
+  return tagOrder;
+}

src/components/apps/AppList.tsx

@@ -1,9 +1,9 @@
 import { groupBy } from 'ramda';
+import { Accessor } from 'solid-js';
+import { createTagOrder } from '~/api/get-apps';
 import { AppDefinition } from '~/types';
-import tagOrder from '../../../data/tag-order.json';
 import { Pill } from './Pill';
 
-import { Accessor } from 'solid-js';
 import style from './AppList.module.css';
 
 export function AppList({
@@ -15,6 +15,7 @@ export function AppList({
   tag?: Accessor<string | null>;
   resetTag?(): void;
 }) {
+  const tagOrder = createTagOrder();
   const grouped = groupBy((app) => app.tags, apps);
 
   return (
@@ -34,7 +35,7 @@ export function AppList({
           </div>
         </div>
       ) : (
-        tagOrder.map((tag) => (
+        tagOrder()?.map((tag) => (
           <div>
             <h2 class={style.Header}>{tag}</h2>
             <div class={style.AppList}>

src/components/apps/AppTable.tsx

@@ -1,13 +1,14 @@
-import { Anchor, Tag, TagProps } from '@hope-ui/solid';
+import { Tag, TagProps } from '@hope-ui/solid';
+import { getAppIcon } from '~/api/get-app-icon';
+import { createTagOrder } from '~/api/get-apps';
 import { useSettings } from '~/state/SettingsProvider';
 import { AppDefinition } from '~/types';
-import tagOrder from '../../../data/tag-order.json';
-import { getAppIcon } from '~/api/get-app-icon';
 
 import style from './AppTable.module.css';
 
 export function AppTable({ apps }: { apps: AppDefinition[] }) {
   const { appSettings } = useSettings();
+  const tagOrder = createTagOrder();
 
   const TAG_TO_COLOR: Record<string, TagProps['colorScheme']> = {
     media: 'primary',
@@ -31,7 +32,10 @@ export function AppTable({ apps }: { apps: AppDefinition[] }) {
       </thead>
       <tbody>
         {apps
-          .sort((tagA, tagB) => tagOrder.indexOf(tagA.tags) - tagOrder.indexOf(tagB.tags))
+          .sort(
+            (tagA, tagB) =>
+              (tagOrder()?.indexOf(tagA.tags) ?? 0) - (tagOrder()?.indexOf(tagB.tags) ?? 0)
+          )
           .map((app) => (
             <tr>
               <td>

src/components/ui/Sidebar.tsx

@@ -1,5 +1,4 @@
-import tagOrder from '../../../data/tag-order.json';
-
+import { createTagOrder } from '~/api/get-apps';
 import style from './Sidebar.module.css';
 
 type SidebarProps = {
@@ -7,10 +6,12 @@ type SidebarProps = {
 };
 
 export function Sidebar(props: SidebarProps) {
+  const tagOrder = createTagOrder();
+
   return (
     <div class={style.Sidebar}>
       <ul class={style.Menu}>
-        {tagOrder.map((tag) => (
+        {tagOrder()?.map((tag) => (
           <li
             onClick={() => props.onSelectTag?.(tag)}
             onMouseEnter={() => props.onSelectTag?.(tag)}

src/routes/index.tsx

@@ -1,13 +1,11 @@
 import { createSignal, onCleanup, onMount } from 'solid-js';
+import { createApps } from '~/api/get-apps';
+import { AppList } from '~/components/apps/AppList';
 import { DateView } from '~/components/widgets/Date';
 import { Search } from '~/components/widgets/Search';
 import { Weather } from '~/components/widgets/Weather';
-import data from '../../data/apps.json';
 import { Sidebar } from '../components/ui/Sidebar';
-
-import { AppList } from '~/components/apps/AppList';
 import style from './index.module.css';
-import { HiOutlineXCircle, HiSolidXCircle } from 'solid-icons/hi';
 
 export default function Home() {
   onMount(() => {
@@ -18,6 +16,8 @@ export default function Home() {
     parent.removeEventListener('keydown', handleKeypress);
   });
 
+  const apps = createApps();
+
   const [activeTag, setActiveTag] = createSignal<string | null>(null);
   const [timeout, storeTimeout] = createSignal<NodeJS.Timeout | null>(null);
 
@@ -47,7 +47,7 @@ export default function Home() {
       }
       default: {
         if (document.activeElement?.id !== 'search') {
-          const app = data.find((app) => app.shortcut === e.key);
+          const app = apps()?.find((app) => app.shortcut === e.key);
 
           if (app) {
             window.open(app.url);
@@ -63,7 +63,7 @@ export default function Home() {
       <div class={style.ContentWrapper}>
         <div class={style.Widgets}>
           {activeTag() ? (
-            <AppList apps={data} tag={activeTag} resetTag={resetTag} />
+            <AppList apps={apps() ?? []} tag={activeTag} resetTag={resetTag} />
           ) : (
             <>
               <Search />