fix: fix image asset async (#545)

* fix: fix image asset async * fix: move asset load resource outside memo
riccardoperra · Jun 26, 2023 · a166585 · a166585
1 parent 93e590d
commit a166585
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/apps/codeimage/src/components/Footer/Footer.css.ts b/apps/codeimage/src/components/Footer/Footer.css.ts
@@ -4,7 +4,8 @@ import {themeVars} from '@codeimage/ui';
 export const wrapper = style({
   position: 'absolute',
   bottom: 0,
-  width: '100%',
-  zIndex: 0,
+  right: 0,
+  zIndex: themeVars.zIndex['20'],
   color: themeVars.dynamicColors.descriptionTextColor,
+  width: 'auto',
 });
diff --git a/apps/codeimage/src/components/Footer/Footer.tsx b/apps/codeimage/src/components/Footer/Footer.tsx
@@ -7,7 +7,7 @@ export const Footer = () => {
 
   return (
     <div class={styles.wrapper}>
-      <Box display={'flex'} justifyContent={'flexEnd'} padding={2}>
+      <Box display={'inlineFlex'} justifyContent={'flexEnd'} padding={1}>
         <Box marginRight={5}>
           <Link href={'https://github.com/riccardoperra/codeimage'} size="xs">
             GitHub

diff --git a/apps/codeimage/src/state/assets/assets.ts b/apps/codeimage/src/state/assets/assets.ts
@@ -2,7 +2,14 @@ import {provideAppState} from '@codeimage/store/index';
 import {generateUid} from '@codeimage/store/plugins/unique-id';
 import {withIndexedDbPlugin} from '@codeimage/store/plugins/withIndexedDbPlugin';
 import {createEventBus} from '@solid-primitives/event-bus';
-import {Accessor, createEffect, createResource, on} from 'solid-js';
+import {
+  Accessor,
+  createEffect,
+  createMemo,
+  createResource,
+  on,
+  untrack,
+} from 'solid-js';
 import {unwrap} from 'solid-js/store';
 import {defineStore} from 'statebuilder';
 
@@ -116,11 +123,16 @@ export const AssetsStore = defineStore<PersistedAsset[]>(() => [])
         return () => store.get.find(item => item.id === id);
       },
       getAssetImageBrowserUrl(id: string): Accessor<string | undefined> {
-        return () => {
+        if (isAssetLinkUrl(id)) {
+          // FIXME: find a better way to let the signal refresh: this may cause some side effect
+          untrack(() => this.loadAsync(() => id)[0]?.());
+        }
+        // eslint-disable-next-line solid/reactivity
+        return createMemo(() => {
           const asset = this.getAsset(id)();
           if (!asset) return undefined;
           return `url(${asset.url})`;
-        };
+        });
       },
       async addLink(link: string, scope = 'app') {
         const id = generateAssetLinkId(link.trim());